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.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/
從這裏往下看!!!
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章