Layui資料表格 加入 自定義擴充套件方法(重新渲染Render當前頁資料)
具體開發中遇到的問題如下,
資料表格內的 內容 通過 table.cache["SampleList"] 修改後,重新渲染或重新載入會導致當前操作的分頁 和 配置被清空。我修改了第5頁第X行的X列值,重新渲染後就回到了最原始第1頁或重新呼叫了介面。
Layui 官方提供的文件 提供的重新整理表格方法有幾種
1 var obj = table.render({});//生成一個數據表格
1.obj.Reload (這個方法會根據初始化表格的Option {} ,重新呼叫介面載入一次)
2.Table.Render(這個無效果)
---------------------------------------------------- ---------------------------------------------------- ---------------------------------------------------- ----------------------------------------------------
需要達到的效果是:
不呼叫介面,僅僅只是從table.cache["表ID"] 當前頁快取裡重新渲染,
步驟:
1.將需要修改的列 值 使用table.cache["表ID"][“行索引”]["欄位名"]=“xxxx” 進行修改
2.呼叫自己寫的擴充套件方法,重新渲染到當前頁介面。
這裡需要修改 原生js lib\layui\lay\modules\table.js,
將下面的擴充套件方法程式碼 加入到 lib\layui\lay\modules\table.js 裡,原生js是壓縮了的,這裡的demo 格式化了一下。
要加入的擴充套件方法程式碼如下:
不壓縮:
YRRender: function(cache) { if (cache == undefined) { console.error("cache引數為table.cache['表ID']"); return; } var s = { data: cache }; e.renderData(s, e.config.page.curr, e.config.page.limit, !0); }
壓縮後:
YRRender: function (cache) { if (cache == undefined) { console.error("cache引數為table.cache['表ID']"); return; } var s = { data: cache }; e.renderData(s, e.config.page.curr, e.config.page.limit, !0); }
呼叫方法:
將要改的資料 table.cache["SampleList"] 裡 進行修改後,
呼叫
obj.YRRender(table.cache["SampleList"]);//SampleList即 option 裡 elem: '#SampleList' 屬性
效果圖:
這裡我用js修改了cache裡的資料,然後調了YRRender方法。分頁為改變,也未請求介面