layui框架中table字段篩選功能有什么用

這篇文章主要為大家展示了“l(fā)ayui框架中table字段篩選功能有什么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“l(fā)ayui框架中table字段篩選功能有什么用”這篇文章吧。

首先是在這個(gè)是針對(duì)字段的，所以給cols新增一個(gè)配置項(xiàng)，來(lái)決定哪些列需要有過(guò)濾的功能，一般來(lái)說(shuō)只有那些數(shù)據(jù)可以歸納成幾種分布的列才有做這個(gè)過(guò)濾的需求，比如例子中的性別列還有職業(yè)列，id列這些的意義不大，當(dāng)然也不是絕對(duì)的，有的就是需要呢。

所以新增了一個(gè)配置項(xiàng)filter: true/false/null

然后在表格渲染完畢之后給表頭對(duì)應(yīng)的字段添加上過(guò)濾的那個(gè)圖標(biāo)和事件

這個(gè)是主要的代碼篇幅太長(zhǎng)沒(méi)辦法全顯示，簡(jiǎn)單介紹一下，就是利用table.eachCols去遍歷表頭，把需要添加圖標(biāo)的給加上圖標(biāo)就好了，注意這時(shí)候?qū)嶋H是不會(huì)生成我們后面點(diǎn)擊看到的里面的復(fù)選的內(nèi)容的。

實(shí)際這些都是靠后面的點(diǎn)擊事件再做處理就好，在點(diǎn)擊的事件中去遍歷得到當(dāng)前這一列的值的一個(gè)集合。

注意！這里是我們最終看到的內(nèi)容的集合，而不是針對(duì)數(shù)據(jù)的，因?yàn)樽侄斡衪emplet可以進(jìn)行轉(zhuǎn)換，所以即使背后的值可能不一樣最終顯示出來(lái)的也有可能是一樣的，這里應(yīng)該是歸納為相同的一類。

然后點(diǎn)擊這個(gè)篩選的時(shí)候都做了什么呢？

除了上面說(shuō)了得到一個(gè)集合之外，就是利用這個(gè)集合作為一個(gè)table的數(shù)據(jù)，并且根據(jù)邏輯得到是否初始選中，然后layer去彈出一個(gè)彈框把表格渲染到里面去。

這里有一個(gè)關(guān)鍵的就是是否要多列篩選的支持，就是說(shuō)可以先賽選一個(gè)列，然后點(diǎn)擊另外一個(gè)列在前面篩選的前提下篩選這個(gè)列，目前是直接否決了這個(gè)需求，因?yàn)樘珡?fù)雜了而且很難解釋。

因?yàn)樗麄冎g都是會(huì)相互影響的，這邊的列隱藏之后對(duì)于那邊的列它可能會(huì)出現(xiàn)部分分類它的數(shù)據(jù)部分是顯示的部分是隱藏的。

這時(shí)候怎么辦？

唯一一個(gè)比較嚴(yán)謹(jǐn)?shù)木褪切略鲆环N狀態(tài)叫半選狀態(tài)，但是實(shí)際應(yīng)用場(chǎng)景應(yīng)該遇到的不大，要實(shí)現(xiàn)卻是相當(dāng)費(fèi)勁的，所以干脆不支持，這個(gè)在excel中好像也是這么個(gè)限定，不知道有沒(méi)有記錯(cuò)。

最后是監(jiān)聽(tīng)這個(gè)表格的復(fù)選事件，背后的實(shí)際的邏輯就是把對(duì)應(yīng)的tr給顯示或者隱藏。然后點(diǎn)擊打開這個(gè)過(guò)濾的選項(xiàng)的時(shí)候也是根據(jù)table內(nèi)部的tr的顯示隱藏情況來(lái)決定是默認(rèn)選中還是未選中。

然后因?yàn)閳D標(biāo)在layui提供的里面找不到合適的，新增了一個(gè)樣式文件來(lái)支持，注意加入：

存在問(wèn)題：細(xì)心的應(yīng)該會(huì)看到字段篩選之后下面的統(tǒng)計(jì)列沒(méi)有更新，實(shí)際這個(gè)是不對(duì)的，篩選之后部分列不顯示了，那么對(duì)應(yīng)的統(tǒng)計(jì)應(yīng)該是我們看到的列的統(tǒng)計(jì)，這個(gè)可以自己考慮下如何處理。

我的思路是封裝出來(lái)一個(gè)針對(duì)表格統(tǒng)計(jì)的方法，可以對(duì)數(shù)據(jù)進(jìn)行計(jì)算然后更新到對(duì)應(yīng)的dom節(jié)點(diǎn)上，原始的table提供的統(tǒng)計(jì)最大的作用就是生成一個(gè)固定在下方的容器節(jié)點(diǎn)。

至于里面的內(nèi)容實(shí)際是不要緊的，很多小伙伴會(huì)問(wèn)layui能不能提供統(tǒng)計(jì)行的數(shù)據(jù)是后臺(tái)返回的支持之類的問(wèn)題，實(shí)際這些都可以在上面提到的這個(gè)封裝方法里面去處理，也可以變得很自由，不僅僅是求和，還可以是各種各樣的計(jì)算之類的，但是這個(gè)不是這個(gè)帖子的重點(diǎn)，后面再實(shí)現(xiàn)。

測(cè)試頁(yè)面： https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabledgitee項(xiàng)目： https://gitee.com/sun_zoro/layuiTablePlug

以上是“l(fā)ayui框架中table字段篩選功能有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！