layui用table.render加载数据 用table.reload重载里面的数据---解决table.render重新加载闪动的问题_itfallrain的博客-CSDN博客

来源: layui用table.render加载数据 用table.reload重载里面的数据—解决table.render重新加载闪动的问题_itfallrain的博客-CSDN博客

今天在用layui 展示数据的时候,首先想到了table.render这个插件进行数据的展示,因为数据要实时刷新,说到实时刷新,你最低要三秒刷新一次表格的数据吧!!!一开始写了个定时把table.render放到定时函数里面,三秒执行一次函数,那么问题来了,虽然效果是实现了,但这是重新加载表格啊,三秒闪一次,别说是用户了,我都看不下去了,闪的眼疼,就想有没有只让数据重新加载,表格不动。终于功夫不负有心人!!!
tablePlug感觉就是救命稻草,就是解决这个问题的,这也是贤心人性补充吧
下面教你怎么用
1:首先奉上下载这个插件的地址
https://gitee.com/sun_zoro/layuiTablePlug
2:然后找到“下载”文件夹下把tablePlug文件夹复制到你项目的合适位置
3:敲黑板!!!把你项目一开始引入layui modules文件夹下的table.js给替换了(或者你手动修改源码),替换成你从git上下载的那个table.js(这个可能后续不需要修改,现在贤心还没整合!!!)
然后就是引入了

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”
,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()
});
}
});

重点:需要重新加载数据要在table.render中加入 ,smartReloadModel:true(开启)
友情提示:table.reload这个不需要任何改动,组件会根据你reload里面的参数去判断是重新请求数据还是重载!!!
写的应该很详细了,觉得有问题的可以直接参考贤心原文解释!!!
最后的最后给你个贤心博文地址,如果遇到问题这里面有解决办法
https://fly.layui.com/jie/43423/
从这里往下看!!!

————————————————
版权声明:本文为CSDN博主「itfallrain」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_38215042/article/details/102705606

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏