最近使用layui做前端,使用了table,由于需要添加定时器刷新table,导致页面闪烁,令人生不如死。然后就拼命的百度找解决方法,终于找到了组织。
LAYUI用TABLE.RENDER加载数据 用TABLE.RELOAD重载里面的数据---解决TABLE.RENDER重新加载闪动的问题
我这里补充一下下载地址: https://gitee.com/sun_zoro/layuiTablePlug
下面教你怎么用
1:首先奉上下载这个插件的地址
https://gitee.com/sun_zoro/layuiTablePlug
2:然后找到“下载”文件夹下把tablePlug文件夹复制到你项目的合适位置
3:敲黑板!!!把你项目一开始引入layui modules文件夹下的table.js给替换了(或者你手动修改源码),替换成你从git上下载的那个table.js(这个可能后续不需要修改,现在贤心还没整合!!!)
然后就是引入了
码云 readme.md有很清晰的说明,不过建议用下载的layuiTablePlug\layui\src\lay\modules\table.js替换layui\modules文件夹下的table.js。因为我改动源码半天都不得行,年轻人要听话。
最后需要注意layui的版本 本人2.6.5
layui.config({base:'static/tablePlug/'}).use(['table','tablePlug'], function(){
var table = layui.table;
var $ = layer.$;
var tablePlug=layui.tablePlug;
tablePlug.smartReload.enable(true);//处理不闪动的关键代码
table.render({
elem: '#testone'
, method : 'POST'
,contentType: 'application/json'
,url:UrlSchool.oneWen() //既然要尊重原创,这里就不改了
,id:"testoneTable" //id必须设置要不定时器对表格重载找不到id 我在说什么啊
,smartReloadModel:true //处理不闪动的关键代码
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,cols: [
[
{field:'deviceName', title:'设备名称', width:100}
,{field:'valveStatusName', title:'阀门状态', width:120, edit: 'text'}
]
]
});
// var t1 = window.setInterval(hahahah,3000);
function hahahah(){
// 表格重载
table.reload('testoneTable',{
url:UrlSchool.oneWen()
});
}
});