跨frame 刷新table时表格被挤压
项目中遇到的需求:
项目有项目列表页面,有某项目的详情页面。项目有进度,在列表页面和详情页面都有 显示。
在项目的详情页面对项目的操作,会动态修改项目进度,详情页的进度动态更改很简单,现在记录一下跨页面调用,以实现列表页面的进度更新。
项目列表页面:
项目详情页面:
现在的结果:
百度了一下,这是layui - table的bug, tab切换的时候常发生这种状况。
解决方式:
参考资料(感谢):https://qq52o.me/2769.html
reload之后,调用一下resize方法。
//刷新列表页面的列表:
var pmFrameUrl = localStorage.getItem("pmFrameUrl"); //这是我在打开tab的时候缓存的项目列表frame的url
if(pmFrameUrl){
var pmFrame = $(window.parent.document).find('iframe[src="'+pmFrameUrl+'"]');
var pmWindow = pmFrame[0].contentWindow;
var docu = pmWindow.document;
pmWindow.query(); //这个方法是列表页面筛选按钮调用的方法,我顺便调用了
//重新设置宽度,不然会挤在一起
pmWindow.resiztProjectTable();
}
//项目列表页面的两个方法:这里的projectList是table的id
function query(a) {
//组装查询的条件:例如:
var jsondata = {
ooo: ooo,
xxx: xxx,
};
//带着筛选的条件,reload
table.reload('projectList', {where: jsondata});
}
function resiztProjectTable(){
table.resize('projectList');
}