RowGroup - 新擴展

將具有單一特性的資料列分組，可以是非常強大的工具，讓使用者能夠輕鬆理解複雜的資料集並从中獲取知識。單一表格將提供基本的分組（例如顯示學生列表），但您可能也希望依表格內的資料點分組（例如，以學生為例的年齡）。

DataTables 範例長期以來包含一個顯示如何進行資料列分組的範例，但任何客製化都需要修改該範例中提供的程式碼；如果開發人員不熟悉 DataTables，並非總是能直覺地了解這些變更應該是什麼。因此，我很榮幸地為 DataTables 推出一個新的擴展功能：RowGroup。

• 依職位分組
• 依辦公室分組

下載

RowGroup 擴展功能可在 DataTables CDN 和下載產生器上取得。您也可以從 NPM 和 Bower 安裝。

更多範例請參閱 RowGroup 文件。

功能

RowGroup 的基本功能是從表格資料中取得單一資料點（這不一定要在欄位中 - 除非您想要能夠依該資料排序表格），並根據具有相似值的資料列，以視覺方式分組表格。

群組會顯示每個群組的標題和/或頁尾列，這些列會動態插入表格中。預設情況下，只會顯示分組資料點值的標題，但開始和結束分組資料列完全由您控制，並且可以使用自訂渲染器來顯示您計算的資料列摘要資訊（總計、平均值、計數等）。

用法

RowGroup 最常用的選項是 rowGroup.dataSrc 選項。這用於告知它從哪裡讀取分組的資料。此參數與 columns.data 非常相似，它可以給定為整數（對於陣列來源的表格）或字串（對於物件來源的表格）。字串選項也支援 Javascript 點狀物件表示法，因此您可以從巢狀屬性讀取資料。

DOM/陣列來源資料

$('#myTable').DataTable( {
    rowGroup: {
        // Group by office
        dataSrc: 2
    }
} );

<tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
</tr>

Ajax/物件

$('#myTable').DataTable( {
    ajax: '/api/staff',
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        ...
       ],
    rowGroup: {
        // Group by office
        dataSrc: 'office'
    }
} );

{
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$320,800",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
}

在指定應使用哪些資料進行分組的功能之後，rowGroup.startRender 和 rowGroup.endRender 選項將成為下一個最常用的選項。這些分別定義開始和結束分組資料列將顯示的內容。每個選項都可以設定為 null 以停用它們（預設情況下結束選項為停用），或者可以設定為一個函數，該函數採用一個 DataTable.Api 執行個體，其中包含群組的資料列（即 rows() 的結果）以及分組資料點的值。

渲染函數可讓您自訂使用者看到的內容，因此您可以執行計數、加總、平均值等計算。在此範例中，結束渲染器用於顯示薪資和年齡欄的平均值，並且與表格的其餘部分內嵌顯示。

$('#myTable').DataTable( {
    order: [[2, 'asc']],
    rowGroup: {
        startRender: null,
        endRender: function ( rows, group ) {
             var ageAvg = rows
                .data()
                .pluck(3)
                .reduce( function (a, b) {
                    return a + b*1;
                }, 0) / rows.count();

            var salaryAvg = rows
                .data()
                .pluck(5)
                .reduce( function (a, b) {
                    return a + b.replace(/[^\d]/g, '')*1;
                }, 0) / rows.count();
            salaryAvg = $.fn.dataTable.render.number(',', '.', 0, '$').display( salaryAvg );

            return $('<tr/>')
                .append( '<td colspan="3">Averages for '+group+'</td>' )
                .append( '<td>'+ageAvg.toFixed(0)+'</td>' )
                .append( '<td/>' )
                .append( '<td>'+salaryAvg+'</td>' );
        },
        dataSrc: 2
    }
} );

更多範例請參閱 RowGroup 文件和參考。

已知限制

值得強調的是，RowGroup 目前與下列功能不相容

• Buttons 的匯出選項
• FixedColumns
• Scroller。

相容性圖表詳細說明了 DataTables 核心功能與擴展功能之間的相容性。

未來工作

您可能會想，這一切聽起來都不錯，但其他功能（例如摺疊群組、多層級群組等）呢？這是向社群提供基本軟體的初始版本 - 實際上編寫此軟體的初始版本只花費不到一天，但經過測試、範例、文件和部署基礎架構，讓其可以發布卻花費了將近兩週的時間。現在一切就緒，更容易為軟體帶來新功能。

考慮到這一點，目前計畫了以下功能

• 按一下以依分組資料點排序
• 按一下並拖曳以進行分組 - 將欄標題拖曳到分組區域，以允許使用者輕鬆定義分組
• 多層級分組 - 允許巢狀分組
• 支援 Button 的匯出選項 - 目前匯出時會忽略分組資訊。

長期工作

• 展開和摺疊群組 - 因為 DataTables 核心沒有任何群組的概念，因此這不是一個容易新增的功能
• Rowspan 顯示版面配置選項 - 更清楚地顯示視覺階層。

這些新功能恐怕不會在一夜之間實現。與 DataTables 的其餘部分一樣，這是一個不斷發展的過程，將與 DataTables 專案其餘部分的改進同時進行。

這是我對軟體可以新增哪些功能的想法清單，我也很樂意收到您的意見回饋，了解您希望在未來為 RowGroup 新增哪些功能！

請享用！