本篇文章展示了layui實(shí)現(xiàn)表格反轉(zhuǎn)的方法具體操作，代碼簡(jiǎn)明扼要容易理解，絕對(duì)能讓你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),雙河企業(yè)網(wǎng)站建設(shè),雙河品牌網(wǎng)站建設(shè),網(wǎng)站定制,雙河網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,雙河網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

表格反轉(zhuǎn)，或者叫行列轉(zhuǎn)換，估計(jì)都不陌生，先看效果圖：

測(cè)試頁(yè)面： https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

相對(duì)標(biāo)題說(shuō)的簡(jiǎn)單實(shí)現(xiàn)方式，之前也考慮過(guò)關(guān)于行列轉(zhuǎn)換的表格的實(shí)現(xiàn)方式，主要思路大概就是原始table定義還是不變，然后通過(guò)數(shù)據(jù)重新生成一個(gè)新的cols配置，因?yàn)橐詳?shù)據(jù)記錄作為列的配置。

然后結(jié)合原始的列配置生成出新的最終的數(shù)據(jù)和新的列配置，最后再用表格內(nèi)部的渲染給渲染出來(lái)。基本上實(shí)際就是js將配置和數(shù)據(jù)結(jié)合做了一次反轉(zhuǎn)然后渲染出來(lái)，理論上是可行的，但是實(shí)際上實(shí)現(xiàn)是比較困難的。

轉(zhuǎn)念一想，其實(shí)也沒(méi)必要那么復(fù)雜，可以利用一些樣式控制來(lái)反轉(zhuǎn)表格，只不過(guò)layui的table視圖整個(gè)的結(jié)構(gòu)比較復(fù)雜，由幾部分組成，所以只要處理好細(xì)節(jié)實(shí)際可以簡(jiǎn)單的達(dá)到效果，當(dāng)然簡(jiǎn)單說(shuō)的是相對(duì)的，而且這種方式也會(huì)有一些不足的地方，最后面會(huì)講。

先看看實(shí)現(xiàn)的思路方式：

首先最主要的就是樣式：最為關(guān)鍵的就是利用了writing-mode，這個(gè)是這次修改的基石，目前大概的樣式如下：

主要就是如果.layui-table-view加了一個(gè)vertical的class的話就改變書(shū)寫(xiě)順序，然后下面加了一些針對(duì)layui的表格的不同部位的對(duì)應(yīng)的樣式處理。

加了樣式之后，基本樣子就有了，但是還得潤(rùn)一下色

主要是比如total統(tǒng)計(jì)的部分，也要拿到右邊但是他不屬于box內(nèi)部的，所以top的設(shè)置比較費(fèi)勁，嘗試用樣式處理無(wú)果，最后換成用js去根據(jù)表頭工具欄的高度設(shè)置一個(gè)top。

另外一個(gè)就是將原始的表頭還有統(tǒng)計(jì)行豎起來(lái)分列左右了，勢(shì)必會(huì)影響到內(nèi)容的顯示范圍，所以樣式也沒(méi)處理妥當(dāng)，也就同樣用了js動(dòng)態(tài)的去調(diào)整main部分的margin的值，大致如下：

上面代碼實(shí)際就是簡(jiǎn)單的切換視圖容器的vertical樣式，然后對(duì)應(yīng)的調(diào)整一些容器的樣式，基本上這兩塊就可以達(dá)到基礎(chǔ)的原始的效果了，但是實(shí)際細(xì)節(jié)問(wèn)題還是挺多的，而且備注也說(shuō)了只是一個(gè)初步實(shí)現(xiàn)，后面會(huì)有一個(gè)封裝的過(guò)程。

之所以最終選擇用了兩個(gè)按鈕，寫(xiě)了兩個(gè)監(jiān)聽(tīng)處理，主要就是為了方便理解，還有如果有小伙伴不想用整個(gè)插件，想用單獨(dú)的功能，可以參考這些比較原始的實(shí)現(xiàn)然后自己封裝出適合自己項(xiàng)目的方法。

目前基于整個(gè)插件最后生成的封裝后的方法調(diào)用如下：

具體都做了什么內(nèi)容：

代碼的大概意思就是可以全部表格或者單個(gè)表格轉(zhuǎn)換，然后根據(jù)第二個(gè)參數(shù)reversal，如果沒(méi)有傳就是取相反效果，如果傳入boolean，以實(shí)際的值為準(zhǔn)，true:反轉(zhuǎn)，false:不反轉(zhuǎn),最后調(diào)用的是對(duì)table.Class的擴(kuò)展方法reverse

接下來(lái)是一些細(xì)節(jié)處理，也炸出來(lái)一些以前沒(méi)有遇到的問(wèn)題

首先一個(gè)就是resize的時(shí)候，如果是反轉(zhuǎn)效果的，需要更新一下，原因是部分樣式用了js設(shè)置的，加上表頭工具欄實(shí)際高度不限定，也就是說(shuō)有可能會(huì)變化，那么他變了之前設(shè)定的top就不合適了。

所以目前處理是在resize的時(shí)候?qū)?yīng)的給重新調(diào)整一下，如果后面有優(yōu)化方案，調(diào)整成純的css處理，那就可以省去這一步了。

另外一個(gè)細(xì)節(jié)，就是初始化的時(shí)候能否就讓它反轉(zhuǎn)？這個(gè)一般是沒(méi)問(wèn)題的就是一個(gè)參數(shù)決定狀態(tài)，然后在render完畢的是調(diào)用實(shí)例的reverse處理一下就好，當(dāng)然有更加細(xì)節(jié)的就是這個(gè)新加的屬性，應(yīng)該是屬于智能重載的可重新請(qǐng)求屬性的范疇，所以也要注意加上處理：

done處理

智能重載配置處理：

出來(lái)的效果：

另外一個(gè)炸出來(lái)的問(wèn)題是：目前如果checkbox剛好是固定列，實(shí)際表格內(nèi)部有兩個(gè)列是checkbox一個(gè)在固定列上，一個(gè)是main的但是點(diǎn)擊呢，他不會(huì)去同步另外一個(gè)孿生兄弟，或者說(shuō)影子。

因?yàn)樾辛修D(zhuǎn)換之后，實(shí)際固定列被隱藏了，這時(shí)候操作的是main的，那么操作之后回到另外一種狀態(tài)，就會(huì)出現(xiàn)一些“異象”,全選的還好，它自身有l(wèi)ay-filter，可以利用form.on去監(jiān)聽(tīng)處理如下：

他不會(huì)和table.on沖突方式用

更加麻煩的是下面的單個(gè)復(fù)選的生成的時(shí)候沒(méi)有給他們加lay-filter,這回倒好，監(jiān)聽(tīng)都監(jiān)聽(tīng)不到，但是方法是人想的，沒(méi)有就給動(dòng)態(tài)加上唄，所以有了下面的這塊處理

配合上事件處理：

看完上述內(nèi)容，你們掌握l(shuí)ayui實(shí)現(xiàn)表格反轉(zhuǎn)的方法的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱(chēng)：layui實(shí)現(xiàn)表格反轉(zhuǎn)的方法
文章URL：http://jinyejixie.com/article36/peoopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、品牌網(wǎng)站制作

廣告

聲明：本網(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)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)