天天看點

解決layui使用定時器對table資料重載導緻頁面閃爍的問題

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