關於Footable組件

FooTable是一個基於jQuery和Bootstrap的響應式表格組件，他能很方便的生成下面這種樣式的表格，而你需要做的只是仿造例子構造數據，然後設置一些開關就可以得到常見的功能，比如排序，搜索，過濾，分頁等。想要更多了解FooTable怎麼用的可以看官網的例子，幾分鐘就可以做出個像樣子的表格出來了。

有一個需求

有一個如下的表格，第一列是產品名。

想根據產品名進行合併，同一個產品名只有一個單元格，如下：

怎麼做

方案1：Rowspan不就好了

接到這個需求的時候，第一瞬間就想到用rowspan屬性設置一下就可以了，這個難的可能只是在後台傳遞數據的時候，要提前排序一下，然後計算好相同產品名的數量，這樣前台可以直接設置rowspan的值。 後端(當然你也可以純前端做)怎麼排序和統計產品名就不表了，當我們前端代碼加了rowspan之後，卻發現效果不盡如人意。

可以看出，雖然產品名的列進行了合併，但是合併後，每個產品的第一列是正常的，該產品下面的列HTML屬性都沒有生效，都解釋成了text文本型。這顯然是不行的，懷疑是FooTable本身不支持rowspan，或者需要其他的方法去設置rowspan。

搜資料

打開FooTable相關的Guide，又仔細看了一遍，發現並沒有提到rowspan相關的設置 (可以簡單Ctrl+F搜一下也可以的)。

找到對應Github里的Issues，看有沒有人湊巧也提出過類似問題，果然找到一個Issues with rowspan? 。裡面作者各種回復，反正就是不支持，以後再說的意思，看的心拔拔涼，難不成要換個組件？這好煩啊~

方案2：「假裝」合併了

想想能不能折中一下，每一行還是每一行，不進行合併，然後把每行相同的產品名不顯示，試了下，感覺還行。 搞的再像一點，把中間的邊框去掉，加了border的屬性控制：

看著和預期已經很像了，但是產品名在最上面感覺怪怪的，最好能垂直居中啊 (可能強迫症犯了)。但這個就麻煩了，現在方案要垂直居中，就要算有多少行，然後找個中間行(奇數還行，偶數沒有中間的)，然後把產品名顯示。這就還要遍歷時用變數先存一下產品名...…

…%￥……#￥還是放棄這個想法吧。

方案3：真合併了

想到github上之前那個Issue里，有個小哥提到了他的替代方法，大概意思就是用JS在footable()載入完成表格後，手工把相同行的列給hide掉。

原來的代碼有些複雜，還要往後找多少行，刪掉對應的列。在這裡例子比較簡單，因為後端已經標識出來哪些要隱去的行了，仿照代碼寫了一下。

註：中間加了vertical-align: middle;做垂直居中，加了右邊框顯得整齊一些。

先將原有產品名為SAME的行照常顯示，然後載入完後，找到class=same的行再隱去。

當——當——當——當——

經驗

最好選文檔全，社區活躍的開源組件，遇到問題可以感覺不是那麼無助。

雖然和原來相比，只是一點點優化，但花費的時間卻會很多。

在不斷的追求極致中，才能不斷進步。

參考

FootTable: http://fooplugins.github.io/FooTable/

Issues with rowspan: https://github.com/fooplugins/FooTable/issues/37

更多測試技術文章，微信掃以下二維碼，歡迎關注

測碼奔跑-讓測試技術奔跑起來

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！