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

亦凉 2023-05-31 07:04 16阅读 0赞

###### 今天在用layui 展示数据的时候，首先想到了table.render这个插件进行数据的展示，因为数据要实时刷新，说到实时刷新，你最低要三秒刷新一次表格的数据吧！！！一开始写了个定时把table.render放到定时函数里面，三秒执行一次函数，那么问题来了，虽然效果是实现了，但这是重新加载表格啊，三秒闪一次，别说是用户了，我都看不下去了，闪的眼疼，就想有没有只让数据重新加载，表格不动。终于功夫不负有心人！！！ ######

tablePlug感觉就是救命稻草，就是解决这个问题的，这也是贤心人性补充吧  
下面教你怎么用  
1：首先奉上下载这个插件的地址  
https://gitee.com/sun\_zoro/layuiTablePlug  
2：然后找到“下载”文件夹下把tablePlug文件夹复制到你项目的合适位置  
3：敲黑板！！！把你项目一开始引入layui modules文件夹下的table.js给替换了（或者你手动修改源码），替换成你从git上下载的那个table.js（这个可能后续不需要修改，现在贤心还没整合！！！）  
然后就是引入了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]

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/  
从这里往下看！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20230531/4ff32fb3c3364660a4a9a82944a58f75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]: /images/20230531/ea722670e60c497793815f282b1a3ca6.png