layer.open打开的页面关闭时,table页面刷新的方法
时间: 2023-05-22 14:04:14 浏览: 618
由于您的问题属于编程类的问题,我可以为您提供答案。您可以在关闭页面的时候,通过JavaScript的window.onunload事件来调用table页面的刷新方法,示例如下:
```
window.onunload = function(){
opener.location.reload(); // 刷新table页面
}
```
这段代码会在关闭页面时自动调用,将会重新加载打开窗口的父窗口,从而刷新table页面。
相关问题
优化以下代码 layui.use(['form', 'table'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ cellHeight: 300, elem: '#demo', method:'post', url: "{:url('/manage/aboutuslist/aboutuslist/index')}", toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [ [ {type: "checkbox", width: 50}, {field: 'id', width: 100, title: 'ID', unresize:true, sort: true}, {field: 'img_url', width: 400, title: '图片', templet:'<div> <img class="bianping" src="{{d.img_url}}"/></div>'}, {field: 'typeId', width: 150, title: '位置'}, {field: 'title', width: 180, title: '标题'}, {field: 'addtime', width: 180, title: '添加时间', templet:function (d){return layui.util.toDateString(d.addtime * 1000, "yyyy-MM-dd HH:mm")}}, { fixed: 'right', title: '操作', toolbar: '#barOp', width: "16%" } ] ], limits: [5, 10, 15, 20, 50, 100], limit: 5, first: "首页" , last: "尾页" , page: true, skin: 'line', }); }); table.on('tool(tab)', function (obj) { var data = obj.data.id; var mid = obj.id; parent.layer.open({ type: 2, title: '新增信息', amin: 4, shadeClose: true, shade: 0.8, area: ['53%', '60%'], content: "{:url('/manage/aboutuslist/aboutuslist/edit/id"+mid+"')}", end: function () { $(".layui-laypage-btn").click();//重新绑定数据,防止刷新出现闪屏效果。 } }); });
优化后的代码如下:
```
layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
cellHeight: 300,
elem: '#demo',
method: 'post',
url: "{:url('/manage/aboutuslist/aboutuslist/index')}",
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [
[{
type: "checkbox",
width: 50
},
{
field: 'id',
width: 100,
title: 'ID',
unresize: true,
sort: true
},
{
field: 'img_url',
width: 400,
title: '图片',
templet: '<div> <img class="bianping" src="{{d.img_url}}"/></div>'
},
{
field: 'typeId',
width: 150,
title: '位置'
},
{
field: 'title',
width: 180,
title: '标题'
},
{
field: 'addtime',
width: 180,
title: '添加时间',
templet: function (d) {
return layui.util.toDateString(d.addtime * 1000, "yyyy-MM-dd HH:mm")
}
},
{
fixed: 'right',
title: '操作',
toolbar: '#barOp',
width: "16%"
}
]
],
limits: [5, 10, 15, 20, 50, 100],
limit: 5,
first: "首页",
last: "尾页",
page: true,
skin: 'line',
});
table.on('tool(tab)', function (obj) {
var data = obj.data.id;
var mid = obj.id;
parent.layer.open({
type: 2,
title: '新增信息',
amin: 4,
shadeClose: true,
shade: 0.8,
area: ['53%', '60%'],
content: "{:url('/manage/aboutuslist/aboutuslist/edit/id" + mid + "')}",
end: function () {
$(".layui-laypage-btn").click();
}
});
});
});
```
主要是将代码格式化了,将缩进对齐,使得代码更易于阅读。同时,将逗号的放置方式统一,增加了代码的一致性。
layer tab 刷新当前tab页,按钮
如果您想在 Layer 中的当前选项卡页中添加一个按钮,使其可以刷新该选项卡中的内容,则可以按照以下步骤进行操作:
1. 在 HTML 中添加一个按钮元素,例如:
```html
<button id="refresh-btn">刷新</button>
```
2. 在 JavaScript 中,使用 Layer 的 `index` 属性获取当前选项卡的索引,然后使用该索引获取当前选项卡的内容区域的元素,例如:
```javascript
var index = layer.getFrameIndex(window.name);
var contentElem = parent.$('.layui-layer-content').eq(index);
```
3. 在按钮的 `click` 事件处理程序中,使用 `contentElem` 元素的 `find` 方法查找需要刷新的元素,例如:
```javascript
$('#refresh-btn').click(function() {
contentElem.find('#my-table').load('/my-data-url');
});
```
其中,`#my-table` 是需要刷新的元素的选择器,`/my-data-url` 是获取数据的 URL。
4. 最后,在 Layer 的 `open` 方法的 `success` 回调函数中,为按钮添加 `click` 事件处理程序即可,例如:
```javascript
layer.open({
// ...
success: function(layero, index) {
$('#refresh-btn').click(function() {
contentElem.find('#my-table').load('/my-data-url');
});
}
});
```
这样,当您打开 Layer 中的选项卡页时,会自动添加一个“刷新”按钮,点击该按钮即可刷新选项卡页中的内容。
阅读全文