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

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

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>

相应的查询方法定义：

javascript 复制代码

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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方法

javascript 复制代码

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

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

javascript 复制代码

//弹出层的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又调用一次，造成两次调用浪费资源