当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 167867提问 提问时间:2023-10-23 11:52:43阅读次数: 67

最佳答案 问答题库678位专家为你答疑解惑

首先在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又调用一次,造成两次调用浪费资源

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"Layui弹出层关闭后页面自动刷新的用法以及建议":http://eshow365.cn/6-22447-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!