项目背景：利用layui数据表格做后台管理系统
在每行后的详情按钮点击可出现弹窗，弹窗内容为点击用户的详情，内嵌一个数据表格展示
看代码：
按钮点击弹框
//定于全局变量存id;
var aluId;
/* 详情弹窗 */
function more(id){
layer.open({
type: 1,
area: ["1200px", '700px'],
title: "捐款详情",
maxmin: false,
content: '<div><table id="templateTable" lay-filter="templateTable"></table><div class="layui-box box" id="pageCon"></div></div>', //先定义一个数据表格的div框
success: function (result) {
moredata(id,null,null);
aluId=id;
},
});
}
弹框显示内容：包括数据表格及工具栏，使用ajax获取data，这里集成了分页。
/* 弹窗分页的数据重载 */
function moredata(id,ObjSize,ObjeCurrent){
var data="?id="+id;
var conMode=$("#conMode").val();
if(!checkStrIsNull(conMode)){
data+="&conMode="+conMode;
}
if(!checkStrIsNull(ObjSize)){
data+="&pageSize="+ObjSize;
}
if(!checkStrIsNull(ObjeCurrent)){
data+="¤tPage="+ObjeCurrent;
}
console.log(data);
$.ajax({
url: path + "/manageAluController/getManageAluListById"+data,
type: "POST",
dataType: "JSON",
contentType: "application/json;charset=utf-8",
success:function(result){
let page = result.data;
let code = result.code;
let msg = result.msg;
if(code != 0){
layer.msg(msg, {icon:2, time:1500, shade:0.1});
return;
}
let list = page.list;
let count = page.count;
currentPage = page.currentPage;
let pageSize =page.pageSize;
table.render({
elem: '#templateTable'
, height: 500
, width: '100%'
, toolbar: '#toolbarCon'
, data: result //result格式为[{},{}],此处用的是固定数据,也可以用url来请求后台获取数据,如果使用url要根据layui规定的格式返回才可以渲染上,例：{"code": 0,"msg": "","count": 1000,"data": [{}, {}]} 或者使用parseData进行转化也可以
, cols: [[ //设置数据表格表头
{/* type:'numbers', */title:'序号',align:'center',width:40,templet:function(res){
//自定义序号列
return res.LAY_INDEX+((page.currentPage-1)*page.pageSize);
}
}
,{field:'conAluName', width: 165, title: '姓名',templet:"#conAluName"}
,{field:'conAluIdentity', width: 165, title: '身份',templet:"#conAluIdentity"}
,{field:'conTime', width: 165, title: '捐款时间',templet:"#conTime"}
,{field:'conOdNumber', width: 300, title: '捐款订单号',templet:"#conOdNumber"}
,{field:'conMoney', width: 165, title: '捐款金额',templet:"#conMoney"}
,{field:'conMode', width: 165, title: '捐款方式',templet:"#ColconMode"}
]],
data: list,
limit: pageSize,
count: count,
});
$('#conMode').val(conMode);
//初始化分页
morePage(laypage, "pageCon", count, pageSize, currentPage,id);
conModeChecked(conMode);
},
error:function(){
layer.msg("网络异常请重试", {icon:2, time:1500, shade:0.1});
}
});
//-- end Ajax
}分页代码内容
/* 详情窗口分页 */
function morePage(laypage,elemId,count,limit, currentPage,id){
laypage.render({
elem:elemId,
count:count,//数据总数
limit:limit,//每页显示数量
limits:[10, 20, 30, 40, 50,100,500,1000,1500],//下拉选择每页显示数量的值
curr:currentPage,//当前页
groups:10,//连续出现的页码个数
prev:"上一页",//自定义“上一页”的内容，支持传入普通文本和HTML
next:"下一页",//自定义“下一页”的内容，同上
first:"首页",//自定义“首页”的内容，同上
last:"尾页",//自定义“尾页”的内容，同上
//自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
layout:['prev', 'page','count','skip','limit', 'next'],
jump: function(obj, first){
//首次不执行
if(!first){
var index = layer.load(2);
moredata(id,obj.limit,obj.curr);
//关闭加载
layer.close(index);
}
}
});
};//--end morePage上方封装好的按钮和工具栏
<!-- 右侧详情按钮 -->
<script type="text/html" id="delivery-table-operate">
<button class="layui-btn layui-btn-xs" lay-event="more">详情</button>
</script>
<!-- 最近捐款时间 -->
<script type="text/html" id="PayDate">
{{# if(d.aluPayDate !=null){ }}
<div>{{layui.util.toDateString(d.aluPayDate, 'yyyy-MM-dd HH:mm:ss')}}</div>
{{# } else {}}
<div align="center" style="align:center;">-</div>
{{# } }}
</script>这个时候出现了一个问题：
在每次改变工具栏中下拉框的数据，进入事件下拉框值改变，发送ajax获取数据，导致数据表格更新。但我们数据表格更新会刷新整个数据表格，其中包括了我的toolbar工具栏，以致于此方法无用。
//监听下拉框数据回显
function conModeChecked(conMode){
//数据回显
$("#conMode").each(function() {
// this代表的是<option></option>，对option再进行遍历
$(this).children("option").each(function() {
// 判断需要对那个选项进行回显
if (this.value == conMode) {
console.log($(this).text());
// 进行回显
$(this).attr("selected","selected");
}
});
})
}也不能说是无用，只是的确下拉框选中了我们的回显值，
包括数据也还是查询的下拉框回显值，不过前台显示却还是初始化状态。
搜了一会百度，最终找到的代码：
var select = 'dd[lay-value='+data.reverse1+']';
$('#uriskLevel').siblings("div.layui-form-select").find('dl').find(select).click();替换在我的 conModeChecked 方法中，的确改变了值，
但是会再进入值改变事件，重复发送ajax，
进入另类死锁。（还是未解决）
最终解决办法：改
/* 详情弹窗 */
function more(id){
let ConContent='<div>'+
'<div style="padding-left:20px;margin-top:10px;">'+
'<form class="layui-form" >'+
'<div class="layui-form-item">'+
'<label class="layui-form-label" style="line-height:40px;">支付方式:</label>'+
'<div class="layui-input-block" style="margin-left:20px;margin-top:-10px;">'+
'<select id="conMode" lay-filter="mode" >'+
'<option value="">全部</option>'+
'<option value="微信支付">微信支付</option>'+
'</select>'+
'</div>'+
'</div>'+
'</from>'+
'</div>'+
'<table id="templateTable" lay-filter="templateTable"></table>'+
'<div class="layui-box box" id="pageCon"></div>'+
'</div>';
layer.open({
type: 1,
area: ["1300px", '700px'],
title: "捐款详情",
maxmin: false,
content:ConContent, //先定义一个数据表格的div框
success: function (result) {
form.render();
moredata(id,null,null);
aluId=id;
},
});
}既然toolbar 无法做到和数据表格区分更新，实现分别。那就将toolbar工具栏内容添加到弹窗的内容，放在数据表格之前，不做数据表格的工具栏。注掉数据表格绑定toolbar这一栏。
最后编译运行成功！（已解决）
解决效果：
总结：
从网上拿的代码也可以用，只不过我这里业务不同，不使用下拉框的值改变时还是可以用。
实在不行也只能用我这种办法，框架的问题是没有办法解决，希望后续layui版本能够升级改良。
版权声明：本文为weixin_45803109原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。