一, 功能实现
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;
}
}
}