Layui弹出层关闭后页面自动刷新的用法以及建议

弹出层关闭后页面自动刷新的用法以及建议"/>

Layui弹出层关闭后页面自动刷新的用法以及建议

首先在HTML中定义一个查询按钮

<div class="layui-inline"><button class="layui-btn" id="searchBtn" lay-submit lay-filter="data-search-btn" >    <i class="layui-icon layui-icon-search">查询</i></button>
</div>

 相应的查询方法定义：

//搜索
form.on('submit(data-search-btn)', function (data) {table.reload('currentTableId',{//重新加载tablewhere: data, //查询条件--也就是查询按钮的这个表单的所有子元素的值page: {curr: 1 //重新从第 1 页开始,如果当前是第10页，再次根据其他条件查询可能无法查询到第10页的数据,翻页时并不会触发跳到第1页}});

以上就是一个完整的查询方法

1. 页面自动刷新的写法：

searchBtn.click(); //查询按钮的id是searchBtn，在当前页面直接.click()即可自动刷新当前页面

2. 弹出层中自动刷新（如果打开弹出层，那么查询按钮这个页面就是父页面，弹出层就是子页面）

parent.searchBtn.click();//要自动刷新就需要调用父页面的searchBtn

3. 定义一个跳转到 ‘添加页面’ 的弹出层的写法：

var index = layer.open({id: 'openxxx', //设定一个id，防止重复弹出title:'添加xx',type: 2,offset: 't', //l代表窗口左侧打开弹出层，r代表右侧，t代表最上面，b代表最下面shade: 0.3, //父窗口阴影透明度area: ['100%', '60%'],  /*长度100%，宽度60% ，也可设置px*/content: '/toAdd',closeBtn: 0, //关闭按钮的样式，0是默认的shadeClose: true, //点击弹出层外空白处skin: 'layui-layer-win10'  // skin: 'layui-layer-molv'墨绿主题 layui-layer-lan 深蓝主题});

如果想要在弹出层关闭时刷新页面，那么就在上面定义的弹出层调用方法open中添加success，如下（关闭弹出层按钮被点击之后触发关闭弹出层，且调用查询按钮刷新页面）：

因弹出层定义open时使用了shadeClose，因此点击弹出层空白处也会关闭弹出层，因此无论是点击空白处或者点击弹出层右上方的关闭按钮，都会触发下方的click方法

,success: function(layero, index) {$('#layui-layer-shade' + index).click(function() {layer.close(index);//关闭滑层动画searchBtn.click();//弹出层关闭时就里面点击确定才干掉，否则弹出层取消也去刷新页面，没有必要，因此注释掉不要每次都刷新页面});}

但是使用以上方法定义页面关闭弹出层后刷新页面有个问题,当弹出层方法的content定义的url不固定，而是open方法定义成一个方法开放调用时，有些页面关闭弹出层是不希望刷新页面的，因此就需要改变这种刷新方法，如下：

//弹出层的js中定义当操作成功后关闭当前弹出层，并触发父页面刷新，而操作失败时不触发：
$.ajax({type: 'POST',url: '/xxxt?id=' + data.field.id,success: function(res) {if (res.code === 0) {layer.msg('xx成功', {time: 500, icon: 1}, function() {var iframeIndex = parent.layer.getFrameIndex(window.name);parent.layer.close(iframeIndex);parent.mteSearchBtn.click();//触发父页面的搜索按钮（searchBtn是按钮的ID）});} else {layer.msg(res.msg, { time: 2000 }, function() {});//失败时只提示信息，不关闭弹出层且不刷新父页面}}
});

以上js定义后，那么父模块中的打开弹出层方法中定义的,success代码块就必须删掉，否则就可能出现你弹出层关闭后刷新页面，父页面的success又调用一次，造成两次调用浪费资源