TableCollapse：讓你的表格更加高效

在前端開發過程中，製作表格是很常見的一項任務。但隨著表格變得越來越複雜，隨之而來的問題也越來越顯而易見。TableCollapse就是一個解決這些問題的工具，它可以讓你的表格更加高效。

一、安裝和使用

TableCollapse是一個基於jQuery開發的插件，安裝非常簡單。只需在頁面引入jQuery和TableCollapse插件即可：

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <script src="./assets/tablecollapse.js"></script>

使用也非常簡單，只需在你的表格上調用tablecollapse方法即可：

$('table').tablecollapse();

二、基本功能

1. 摺疊同值單元格

在表格中，需要展示的數據常常存在許多重複、相鄰的情況，這時候我們就需要將重複的單元格合併在一起，以便更好地呈現數據。TableCollapse可以幫我們自動摺疊相鄰的同值單元格，大大減少了表格的冗餘信息，使得表格更加簡潔明了。

2. 模糊匹配和精確匹配

除了同值單元格的摺疊外，TableCollapse還可以按照給定的模糊匹配或精確匹配規則對一定範圍內的單元格進行摺疊，這使得我們能夠更加精確地對表格進行控制。

3. 手風琴效果

在TableCollapse中，多個摺疊塊默認是可以同時展開的，但也可以通過手風琴效果，讓每次只有一個摺疊塊被展開。這個功能可以通過參數配置實現：

$('table').tablecollapse({
    accordion: true
});

三、高級功能

1. 自定義樣式

TableCollapse默認會為表格生成一些樣式，但也提供了一些自定義樣式的介面供開發者使用，以滿足更為複雜的需求。

$('table').tablecollapse({
    styles: {
        expander: 'my-expander-class',
        row: 'my-row-class',
        cell: 'my-cell-class',
        hidden: 'my-hidden-class',
        visible: 'my-visible-class'
    }
});

2. 自定義摺疊規則

TableCollapse提供了一個非常靈活的摺疊規則介面，開發者可以輕鬆地指定自己想要的摺疊規則，以滿足各種需求。下面是一個摺疊相鄰行且列1和2的值相同的摺疊規則：

$('table').tablecollapse({
    rules: [
        {
            rows: {
                adjacent: true,
                field: 0
            },
            cols: {
                adjacent: false,
                fields: [1, 2],
                match: 'exact'
            }
        }
    ]
});

在上述摺疊規則中，我們通過指定rows和cols兩個對象來定義行和列的匹配規則。其中rows對象指定了按行摺疊的規則，而cols對象指定了按列摺疊的規則。在本例中，我們指定了當列1和2的值相同時，且這些列所在的行是相鄰的時候，進行摺疊。

3. 自定義事件

TableCollapse提供了一些事件，可以幫助開發者更好地控制表格。比如，當摺疊塊的狀態發生變化時，就會觸發一個tablecollapse.changed事件。開發者可以通過監聽這個事件來實現自己的業務邏輯。

$('table').on('tablecollapse.changed', function(event, data) {
    console.log(data);
});

四、總結

TableCollapse是一個非常實用的表格組件，它可以幫助開發者輕鬆地控制表格的呈現方式，讓表格更加高效。