layui表格數(shù)據(jù)變更的處理方式有哪些

這篇文章主要介紹了layui表格數(shù)據(jù)變更的處理方式有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

表格數(shù)據(jù)變更，一般包括幾個內(nèi)容：新增、修改、刪除、移動，開發(fā)中經(jīng)常會面臨的一個問題就是變更之后如何將數(shù)據(jù)同步到節(jié)點上，一直以來個人的建議還是利用表格重載，不管是url模式的還是data模式的實際都是需要重載，url重載自然會重新請求后臺得到最新的數(shù)據(jù)，data模式一般就是對data的操作，之后重新以新的data去渲染出來。

同時會考慮的是如何盡量減少請求，可能感受最深的就是update操作，為了要更新這一條記錄而重載整個表格，請求一遍數(shù)據(jù)感覺劃不來，那么一般來說就可以利用表格的tool事件中的obj.update這個方法去更新。

不過具體使用中就會發(fā)現(xiàn)其諸多的不足的地方，本文就是主要針對這些不足進(jìn)行一個處理給出一個tablePlug.update的方法，然后進(jìn)而衍生出add和remove和move，同時新增了更新統(tǒng)計行數(shù)據(jù)的方法。

測試頁面： 綜合測試頁面 流加載表格測試頁面 定時刷新表格測試頁面

一、update

正如上面說的obj.update(data)有諸多限制，優(yōu)點上來說就是用最小的修改代價，實現(xiàn)了數(shù)據(jù)的更新，他就更新參數(shù)中的data中的鍵的數(shù)據(jù)，不會整個行更不會整個table的節(jié)點更新；缺陷是底層的實現(xiàn)邏輯有點問題：

1、是通過遍歷data，更新緩存cache中對應(yīng)的記錄的key的value，然后根據(jù)cols的配置信息更新td的內(nèi)容，但是如果是想要更新toolbar列的話就沒戲，目前解析的只有templet的，所以如果想要更新toolbar的話基本就只能設(shè)置成templet，而且要給這個列添加一個field,才有理論上的可能。

2、toolbar列即使加了field改成templet也未必能更新過來，因為內(nèi)部的實現(xiàn)邏輯是先判斷原始的data是否有這個key，所以如果field命名是原始的data里面沒有的，后面用obj.update也更新不進(jìn)去的，這個是一個比較大的限制。

因為拿我們項目來說，后臺給我們的數(shù)據(jù)如果原始的記錄里面沒有這個key的值他不會給一個key: ''的，那么后面要想利用obj.update這個key就變得不可能，除非利用parseData在渲染之前對后臺給的數(shù)據(jù)做一個人工的初始化把對應(yīng)的key添加上，但是可想而知有多麻煩。

3、數(shù)據(jù)他是一個一個更新進(jìn)去，然后更新一個值就更新對應(yīng)的td，但是這個就存在另外一個風(fēng)險了，就是遍歷對象他是無序的，比如update{a: 1, b:2}，如果a字段的cols中會用到b字段的值做一個處理再顯示出來。

那么如果遍歷順序是先更新a的值，然后就開始更新a的td的內(nèi)容，這個時候cache中b的值還是舊的不是你要更新進(jìn)去的2,等到更新了b字段了他又不能說檢測到其他字段有使用了這個字段會去再次更新對方的內(nèi)容，這就導(dǎo)致了a出來的結(jié)果還是錯的。

4、更新了統(tǒng)計列的某一個值統(tǒng)計行的對應(yīng)數(shù)據(jù)沒有重新計算。

總結(jié)的來說就是，obj.update實現(xiàn)的還是太過理想化太過簡單，一條記錄從數(shù)據(jù)上來說每個key是獨立的這個沒什么問題，但是到頁面顯示就不然了，因為頁面的內(nèi)容它不一直是單個字段的簡單值顯示，還會進(jìn)行一些特殊處理。

所以需要一個templet來轉(zhuǎn)化，來自定義，所以有可能一個td里面會用到多個字段這個很正常，工具列的按鈕也會根據(jù)數(shù)據(jù)的狀態(tài)去決定部分按鈕是否顯示等等。

所以個人認(rèn)為要更新這個數(shù)據(jù)不能是一個獨立的小單元的更新，而是先update這一行的數(shù)據(jù)然后在update這一行，而不是遍歷被update的key一個個更新，再往大了看，實際這個表的記錄也是一個整體。

也是不能說你改了這條記錄其他的記錄必定是不變的，不排除某個字段的td他會根據(jù)當(dāng)前頁面的同一個field做了什么處理現(xiàn)實，比如統(tǒng)計行，所以目前的思路就是直接將值先update到cache中，然后再調(diào)用table內(nèi)部的渲染tr td的內(nèi)容。

大致的代碼：

前面是針對參數(shù)做了一些處理讓參數(shù)更加靈活，最關(guān)鍵的是后半部分的更新cache的部分，還要一個最關(guān)鍵的renderData的方法:

他的作用就是將cache中的數(shù)據(jù)重新解析渲染一遍，同時針對是否是移動數(shù)據(jù)還有默認(rèn)點擊那一條記錄的處理，但是核心是渲染cache，調(diào)用table.js內(nèi)部的renderData。

使用場景：

1、知道當(dāng)前編輯修改的是那一條記錄，可以看看一個最常用的場景就是點擊編輯彈出一個form然后修改提交，完成之后希望盡量不要重新請求接口更新到data和頁面中去，

gif很不好錄，自己使用測試的例子里面的編輯按鈕測試效果即可

調(diào)用的更新數(shù)據(jù)的形式是：

tablePlug.update(表格實例的id, 當(dāng)前tr的index, newData)

2、不知道當(dāng)前的trIndex的情況下update某一條記錄的話，必須有一個限制就是必須是有主鍵的表格，并且更新的數(shù)據(jù)中必須包含主鍵的字段，不然你也不知道更新的到底是哪條記錄。

tablePlug.update('demo', {id: 10002, username: '賢心'});

3、一次性更新多條記錄，這個參數(shù)trIndex就沒有意義了，加了也沒用，因為是更新多條記錄，所以可以這么寫

tablePlug.update('demo', [{id: 10002, username: '賢心'}, {id: 10006, username: '小偷'， age: 18, sign: '大叔'}]);

這個測試頁面可以看看頭部toolbar中的“積分清零”還有“女性積分加100”這兩個測試按鈕以及背后的事件執(zhí)行的方法

4、更加任性的，只要傳入一個tableId，update會將當(dāng)前按照cache中的數(shù)據(jù)給渲染一次，這個是非常實用的，比如如果你覺得我update中的邏輯針參數(shù)對cache的修改的邏輯不滿意可以自己用自己覺得更好的方法去處理cache，最后執(zhí)行一下tablePlug.update('demo')就好了，提供更高的自由度，和拓展的可能性。

二、addData

addData添加的記錄是已經(jīng)請求接口完成返回的數(shù)據(jù)記錄，本質(zhì)上來說就是不一樣的，所以不要混淆。

具體addData的代碼：

data模式的話，實際也是往data里面添加一些記錄，然后也是再reload一下。

 // 添加單條記錄：tablePlug.addData ('demo', {id: newId, username: '甲'});// 添加多條記錄tablePlug.addData ('demo', [{id: newId1, username: '乙'},{id: newId2, username: '丙'}]);

關(guān)于addData的有一個比較綜合的例子可以看看利用table的data模式怎么跟流加載配合使用，弄成一個流加載的表格

https://sun_zoro.gitee.io/layuitableplug/testTableFlow

三、del

新增和刪除實際個人建議還是reload比較穩(wěn)妥，不管是url還是data模式都是，所以刪除對應(yīng)的處理方式也跟新增實際差不多，只不過刪除麻煩一點的就是data模式要在原始的記錄里面去刪除指定的記錄。

而且有可能開啟了復(fù)選的狀態(tài)記憶刪除了就要將關(guān)于他的狀態(tài)給調(diào)整一下；還是為了使用更方便，參數(shù)同樣做了處理，

1、刪除指定的下標(biāo)的數(shù)據(jù)，可以查看表格行的toolbar中的刪除按鈕的監(jiān)聽處理，但是注意，如果表格是url的模式，目前測試頁面寫的都是json文件，所以reload也不會有效果的。

所以要測試請在data模式的測試，不用糾結(jié)這個，url的如果是實際的服務(wù)接口的話是后臺返回數(shù)據(jù)，一般刪除成功了后面查詢是不會再出來的，除非后臺接口有問題。

2，刪除指定的一些記錄，這個一般有兩種形式，但是要求一樣就是必須是有主鍵的表格

// id集合tablePlug.del('demo', [1,2,3,4]);// 對象數(shù)組tablePlug.del('demo', [{id: 1, name: 'name1'}, {id:2}, {id:4}]);

根據(jù)得到哪種數(shù)據(jù)比較方便就用哪種形式，可以參考測試頁面的批量刪除的處理方式

四、move

這個處理基本跟update差不多，將數(shù)據(jù)在cache中調(diào)整位置，然后調(diào)用一下組件內(nèi)部的renderData的方法讓他重新渲染出來就好

然后為了使用方便衍生出來一個上移跟下移的方法

效果

理論上利用一些拖拽事件或者其他的插件在事件中調(diào)用一下tablePlug.move('demo', form, to);就能夠?qū)崿F(xiàn)順序的任意改變了

限制：注意！這個只是針對數(shù)據(jù)移動，不會有單條數(shù)據(jù)記錄的變動，如果原始的數(shù)據(jù)里面有點擊了排序，那么移動之后默認(rèn)是會去掉這個排序的狀態(tài)了的，因為移動之后很可能就不能滿足當(dāng)前的排序規(guī)則了，所以建議在使用移動的時候不要跟sort搭配，如果有sort而且所謂的移動是會發(fā)起請求改變數(shù)據(jù)的，那么這個建議還是使用請求接口得到兩個新的數(shù)據(jù)然后用update去更新他們的位置。

五、renderTotal

在記錄更新之后，如果存在統(tǒng)計行有需要統(tǒng)計的列，那么值一般也要跟著變，另外一個更加重要的作用就是可以自定義統(tǒng)計規(guī)則，而不是自帶的求和，可以自定一定計算的函數(shù)，或者可以直接類似templet一樣的去自定義返回的內(nèi)容，包括異步的去讀取想要顯示的數(shù)據(jù)。

代碼大概如下：

從實現(xiàn)代碼可以看出就是給cols的字段配置新增一個totalFormat的設(shè)置，可以設(shè)置一個規(guī)則如果不設(shè)置的話就是sum（目前也只是添加了sum，其他的規(guī)則后面會加入或者自己加入，比如平均。

最大最小不過個人覺得主要意義是可以自定義方法，這個才是實用常用的），也可以設(shè)置一個方法，如果不是異步的可以直接把結(jié)果返回，如果是需要異步的那么也可以在得到最終想要的結(jié)果的時候執(zhí)行：

tablePlug.renderTotal(tableId, field, res);

比如下面的：

平時實用的話不是都要自己去調(diào)用的，在插件內(nèi)部已經(jīng)在renderDone回調(diào)里面會去執(zhí)行他了:

參數(shù)也是比較自由，不同的組合會有不同的效果，

// 觸發(fā)更新某個表格的所有列的統(tǒng)計數(shù)據(jù)renderTotal(tableId);// 觸發(fā)更新某個表格的某個字段的數(shù)據(jù)renderTotal(tableId, fieldName);// 更新某個表格的某個字段的統(tǒng)計數(shù)據(jù)為valuerenderTotal(tableId, fieldName, totalValue);

六、refresh

之前做過一個智能reload的修改，即在執(zhí)行table.reload的時候會根據(jù)傳過去的option來判斷只是重新請求數(shù)據(jù)還是需要重載一下，個人覺得效果可以了。

不過對于有強(qiáng)迫癥（有追求）的小伙伴來說，在一些場景下還是不夠好，就是那些定時刷新的，表現(xiàn)就是一方面滾動條會回到top:0,left:0，還有其他的比如鼠標(biāo)在操作分頁組件的時候會覺得失去焦點，新增一個tablePlug.refresh來試一試能否滿足要求。

先看效果：

事件背后做的事情：

表格config：

背后的實現(xiàn)思路

修改table的Class.prototype.pullData支持refresh模式

renderData的時候根據(jù)是否refresh去做一些細(xì)節(jié)的處理，還有一個限定就是返回的數(shù)據(jù)中關(guān)于總數(shù)應(yīng)該是不變的，如果發(fā)生了改變，那么還是會renderData，會重新渲染page組件。

另外一個限制就是這種refresh的表格不建議再加什么按鈕呀edit呀，因為它一直會在變，基本主要就是用來做一個單純用來顯示用的表格，比如一些經(jīng)常變化的數(shù)據(jù)，訪問人次，股票動態(tài)之類的。

使用：

// 啟動表格demo的自動刷新功能，500毫秒一次tablePlug.refresh('demo', 500);// 取消表格demo的自動刷新tablePlug.refresh('demo', false);// 停止所有已開啟自動刷新的表格的自動刷新tablePlug.refresh(false);

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui表格數(shù)據(jù)變更的處理方式有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!