layui-layer.open打开新页面进行数据处理,处理完成后数据表格重载问题
layui,layui数据表格,数据重载
·
大概流程
1. 点击按钮打开子页面(layer.open)
2. 子页面负责数据输入,通过函数封装好数据供父页面使用
<script>
var callbackdata = function () {
var data = {
distributeId: $("#distributeId").val(),
};
return data;
}
</script>
```)
3. 点击提交,通过子页面的函数向父页面传递数据,(父页面获取数据代码:var res = window["layui-layer-iframe" + index].callbackdata(); )
4. 成功,数据重新搜索
tableIns1.reload({
page:{
curr:1 //表格重载的时候将查询页数设为第一页
}
})
1.1 layui数据表格以及监听(父页面)
//按钮监听
<a class="layui-btn layui-btn-xs" lay-event="handle3">办结|退回</a>
//事件绑定
if (obj.event === 'handle3') {
var index = layer.open({
type: 2,
title: '办结|退回',
maxmin: true,
area: ['100%', '100%'],
shadeClose: false, //点击遮罩关闭
content: '/XXX',
btn: ['立即提交','关闭'],
btnAlign: 'l', //按钮显示在左侧
cancel: function () {
layer.close(index); //关闭加载层
},
yes: function(index){
//当点击‘立即提交’按钮的时候,获取弹出层返回的值
//callbackdata 为弹出页面中的函数
var res = window["layui-layer-iframe" + index].callbackdata();
$.ajax({
headers: {"authorization": token},
type: "PUT",
url: "/XXX",
dataType: "JSON",
contentType: "application/json",
data: JSON.stringify(res),
success: function (result) {
layer.msg(result.msg);
layer.close(index); //关闭加载层
//tableIns1 为layui数据表格
tableIns1.reload({
page:{
curr:1 //表格重载的时候将查询页数设为第一页
}
})
}
});
return false;
},
});
}
1.2 数据录入(子页面)
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label required">建议</label>
<div class="layui-input-inline">
<textarea rows="7" placeholder="请输入建议" style=" width: 290%;resize: both"
id="entryAndDistributionOpinionId" name="entryAndDistributionOpinion"
class="layui-textarea"></textarea>
</div>
</div>
</div>
//callbackdata 这个函数名和1.1中 var res = window["layui-layer-iframe" + index].callbackdata(); 对应
<script>
var callbackdata = function () {
var data = {
distributeId: $("#distributeId").val(),
};
return data;
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)