layui實現表格反轉的方法

本篇文章展示了layui實現表格反轉的方法具體操作，代碼簡明扼要容易理解，絕對能讓你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

表格反轉，或者叫行列轉換，估計都不陌生，先看效果圖：

測試頁面： https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

相對標題說的簡單實現方式，之前也考慮過關于行列轉換的表格的實現方式，主要思路大概就是原始table定義還是不變，然后通過數據重新生成一個新的cols配置，因為要以數據記錄作為列的配置。

然后結合原始的列配置生成出新的最終的數據和新的列配置，最后再用表格內部的渲染給渲染出來。基本上實際就是js將配置和數據結合做了一次反轉然后渲染出來，理論上是可行的，但是實際上實現是比較困難的。

轉念一想，其實也沒必要那么復雜，可以利用一些樣式控制來反轉表格，只不過layui的table視圖整個的結構比較復雜，由幾部分組成，所以只要處理好細節實際可以簡單的達到效果，當然簡單說的是相對的，而且這種方式也會有一些不足的地方，最后面會講。

先看看實現的思路方式：

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

主要就是如果.layui-table-view加了一個vertical的class的話就改變書寫順序，然后下面加了一些針對layui的表格的不同部位的對應的樣式處理。

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

主要是比如total統計的部分，也要拿到右邊但是他不屬于box內部的，所以top的設置比較費勁，嘗試用樣式處理無果，最后換成用js去根據表頭工具欄的高度設置一個top。

另外一個就是將原始的表頭還有統計行豎起來分列左右了，勢必會影響到內容的顯示范圍，所以樣式也沒處理妥當，也就同樣用了js動態的去調整main部分的margin的值，大致如下：

上面代碼實際就是簡單的切換視圖容器的vertical樣式，然后對應的調整一些容器的樣式，基本上這兩塊就可以達到基礎的原始的效果了，但是實際細節問題還是挺多的，而且備注也說了只是一個初步實現，后面會有一個封裝的過程。

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

目前基于整個插件最后生成的封裝后的方法調用如下：

具體都做了什么內容：

代碼的大概意思就是可以全部表格或者單個表格轉換，然后根據第二個參數reversal，如果沒有傳就是取相反效果，如果傳入boolean，以實際的值為準，true:反轉，false:不反轉,最后調用的是對table.Class的擴展方法reverse

接下來是一些細節處理，也炸出來一些以前沒有遇到的問題

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

所以目前處理是在resize的時候對應的給重新調整一下，如果后面有優化方案，調整成純的css處理，那就可以省去這一步了。

另外一個細節，就是初始化的時候能否就讓它反轉？這個一般是沒問題的就是一個參數決定狀態，然后在render完畢的是調用實例的reverse處理一下就好，當然有更加細節的就是這個新加的屬性，應該是屬于智能重載的可重新請求屬性的范疇，所以也要注意加上處理：

done處理

智能重載配置處理：

出來的效果：

另外一個炸出來的問題是：目前如果checkbox剛好是固定列，實際表格內部有兩個列是checkbox一個在固定列上，一個是main的但是點擊呢，他不會去同步另外一個孿生兄弟，或者說影子。

因為行列轉換之后，實際固定列被隱藏了，這時候操作的是main的，那么操作之后回到另外一種狀態，就會出現一些“異象”,全選的還好，它自身有lay-filter，可以利用form.on去監聽處理如下：

他不會和table.on沖突方式用

更加麻煩的是下面的單個復選的生成的時候沒有給他們加lay-filter,這回倒好，監聽都監聽不到，但是方法是人想的，沒有就給動態加上唄，所以有了下面的這塊處理

配合上事件處理：

看完上述內容，你們掌握layui實現表格反轉的方法的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！