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

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

tablePlug感觉就是救命稻草,就是解决这个问题的,这也是贤心人性补充吧
下面教你怎么用
1:首先奉上下载这个插件的地址
https://gitee.com/sun_zoro/layuiTablePlug
2:然后找到“下载”文件夹下把tablePlug文件夹复制到你项目的合适位置
3:敲黑板!!!把你项目一开始引入layui modules文件夹下的table.js给替换了(或者你手动修改源码),替换成你从git上下载的那个table.js(这个可能后续不需要修改,现在贤心还没整合!!!)
然后就是引入了
layui用table.render加载数据 用table.reload重载里面的数据---解决table.render重新加载闪动的问题_第1张图片

 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/
从这里往下看!!!
layui用table.render加载数据 用table.reload重载里面的数据---解决table.render重新加载闪动的问题_第2张图片

你可能感兴趣的:(前端js)