解决layui使用定时器对table数据重载导致页面闪烁的问题

tech2022-12-19  119

 

最近使用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() }); } });
最新回复(0)