springboot + layui 下拉框回显(返回上一页面时仍保留上一页数据,不刷新)

一, 功能实现

1, 需求: 要求点击数据表中的positionname对应列的数据,跳转到 update.html 页面,当返回上一页面时,保持原来数据不改变

1.1,书写 html 代码

<script type="text/html" id="usernameTpl">
    <a onClick="storage()" href="updatePosition/{{d.positionname}}?positionid={{d.positionid}}" class="layui-table-link" target="_top">{{ d.positionname }}</a>

</script>

1.2,给layui数据表格绑定 id=“usernameTpl”  的模板js

		<script>
			var customercode = $("#customercode").val();

			layui.use(['laypage', 'layer', 'table', 'element', 'laytpl', 'upload'], function() {
				var laypage = layui.layPage,
					layer = layui.layer,
					table = layui.table,
					element = layui.element,
					laytpl = layui.laytpl,
					upload = layui.upload
				table.render({
					elem: '#table',
					height: 550,
					even: true,
					//每页默认显示的数量注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致
					limit: 10,
					limits: [10, 15, 20],
					//url: 'list?customercode='+customercode,
					url: '/position/list',
					//where: {customercode: 'BSC'},
					page: true, //开启分页
					toolbar: 'default', //开启头部工具栏
					

					
					cols: [
						[ //表头
							{
								type: 'checkbox',
								fixed: 'left'
							}, {
								field: 'positionname',
								title: 'Position Name',
								width: 120,
								fixed: 'left',
								templet: '#usernameTpl'
							}

						]
					],
					id: 'testReload'
				});

1.3, 添加 a 标签对应的点击事件 storage()方法, 获取下拉框的值,并存储

		<script  type="text/javascript">
			function storage() {
				
				sessionStorage.clear();
				
				var customer = $('#CustomerCode option:selected').val();
				var sales = $('#Sales option:selected').val();
				var recruiters = $('#Recruiters option:selected').val();
				var status = $('#Status option:selected').val();
				
				sessionStorage.setItem("customer",customer);
				sessionStorage.setItem("sales",sales);
				sessionStorage.setItem("recruiters",recruiters);
				sessionStorage.setItem("status",status);
				
			}

		</script>

1.4, 通过点击事件跳转到 update.html 页面,设置该页面的back按钮,已达到返回原页面时保持数据不刷新的目的

<input class="layui-btn layui-btn-primary" value="Back" type="button" onclick="back()" />
<script type="text/javascript">
    function back() {

        window.location.href = document.referrer;  
    }
</script>

1.5, 页面返回时,触发ready 事件,获取之前存储的下拉框的值,并隐式触发表格重载事件,完成下拉框默认填充以及自动查询操作,就好像页面数据无刷新一样

				$(document).ready(function() {
					
					var cstmValue = sessionStorage.getItem("customer");					
					var salesValue = sessionStorage.getItem("sales");
					var rValue =  sessionStorage.getItem("recruiters");
					var statusValue = sessionStorage.getItem("status");
					
					var condition = (cstmValue !=null || salesValue || rValue !=null || statusValue !=null );
					
					if(condition == null) {
						
					}else{
						//alert(condition);
						   
						myOption("CustomerCode", cstmValue);
						myOption("Sales", salesValue);
						myOption("Recruiters", rValue);
						myOption("Status", statusValue);
						
						
						layui.use(['form', 'layer', 'jquery'], function() {
							$ = layui.jquery;
							var form = layui.form;
							var layer = layui.layer;
							form.render("select");
						})//use
						
						document.getElementById("rechar_btn").click();
					}
					
					
					
				});//ready
				
				function myOption(optionId, optionValue) {
					
					var all_options = document.getElementById(optionId).options;
					for(i = 0; i < all_options.length; i++){
						if(all_options[i].value == optionValue){
							all_options[i].selected = true;
							
							
						}
					}
				}

 

猜你喜欢

转载自blog.csdn.net/qq_38986609/article/details/87913297