layui中如何對(duì)表格數(shù)據(jù)進(jìn)行操作-創(chuàng)新互聯(lián)

layui中如何對(duì)表格數(shù)據(jù)進(jìn)行操作？這篇文章運(yùn)用了實(shí)例代碼展示，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)主營(yíng)化德網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開(kāi)發(fā)定制,化德h5重慶小程序開(kāi)發(fā)搭建,化德網(wǎng)站營(yíng)銷(xiāo)推廣歡迎化德等地區(qū)企業(yè)咨詢(xún)

一、update

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

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

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

因?yàn)槟梦覀冺?xiàng)目來(lái)說(shuō)，后臺(tái)給我們的數(shù)據(jù)如果原始的記錄里面沒(méi)有這個(gè)key的值他不會(huì)給一個(gè)key: ''的，那么后面要想利用obj.update這個(gè)key就變得不可能，除非利用parseData在渲染之前對(duì)后臺(tái)給的數(shù)據(jù)做一個(gè)人工的初始化把對(duì)應(yīng)的key添加上，但是可想而知有多麻煩。

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

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

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

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

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

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

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

大致的代碼：

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

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

使用場(chǎng)景：

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

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

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

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

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

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

3、一次性更新多條記錄，這個(gè)參數(shù)trIndex就沒(méi)有意義了，加了也沒(méi)用，因?yàn)槭歉露鄺l記錄，所以可以這么寫(xiě)

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

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

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

二、addData

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

具體addData的代碼：

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

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

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

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

三、del

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

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

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

所以要測(cè)試請(qǐng)?jiān)赿ata模式的測(cè)試，不用糾結(jié)這個(gè)，url的如果是實(shí)際的服務(wù)接口的話(huà)是后臺(tái)返回?cái)?shù)據(jù)，一般刪除成功了后面查詢(xún)是不會(huì)再出來(lái)的，除非后臺(tái)接口有問(wèn)題。

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

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

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

四、move

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

然后為了使用方便衍生出來(lái)一個(gè)上移跟下移的方法

效果

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

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

五、renderTotal

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

代碼大概如下：

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

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

tablePlug.renderTotal(tableId, field, res);

比如下面的：

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

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

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

六、refresh

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

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

先看效果：

事件背后做的事情：

表格config：

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

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

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

另外一個(gè)限制就是這種refresh的表格不建議再加什么按鈕呀edit呀，因?yàn)樗恢睍?huì)在變，基本主要就是用來(lái)做一個(gè)單純用來(lái)顯示用的表格，比如一些經(jīng)常變化的數(shù)據(jù)，訪問(wèn)人次，股票動(dòng)態(tài)之類(lèi)的。

使用：

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

到此為止, 關(guān)于layui中對(duì)表格數(shù)據(jù)進(jìn)行操作有了一個(gè)基礎(chǔ)的認(rèn)識(shí), 但是對(duì)于具體的使用方法還是需要多加鞏固和練習(xí)，如果想了解更多相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊。

網(wǎng)站標(biāo)題：layui中如何對(duì)表格數(shù)據(jù)進(jìn)行操作-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article44/cdopee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、電子商務(wù)、App設(shè)計(jì)、響應(yīng)式網(wǎng)站、建站公司、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)