2016 年 6 月 16 日星期四

動態列舉排序

資料排序是任何互動式表格的基本要素，也是 DataTables 讓使用者輕鬆找到他們正在尋找的資料的核心能力。DataTables 內建了多種數字、貨幣、日期和字串的排序類型，但資料是複雜的，DataTables 不可能為所有資料集定義排序選項。因此，它提供了一個外掛程式介面，讓您可以為資料定義自己的排序規則。

在這篇文章中，我將介紹一個函式，它將為列舉列表（通常縮寫為 enum）動態建立排序和類型偵測外掛程式。

這個簡單的範例表格顯示了使用外掛程式來直觀地排序優先順序欄位

專案名稱	優先順序
熟練的鑽頭	高
黃色的昏睡鈾	低
巨大的鎢	中
滿是灰塵的剪刀	高
大院子	低
移動的背包	低
有風險的雲	中

為什麼要排序列舉？

雖然表格中顯示的資料最終可能只是字串，但這些字串傳達了很多我們直觀理解的資訊。例如，如果我們考慮以下三個資料點

我們可以直觀地看到與它們相關聯的優先順序。但是，如果作為字串排序，它們將顯示為：高、低、中，這會導致使用者混淆。使用列舉排序外掛程式，我們可以告訴 DataTables 我們希望如何排序資料。

需要動態解決方案

編寫一個可以處理已知列舉並硬式編碼排序值（例如"高" = 1、"中" = 2 等）的外掛程式是相當簡單的，但我們總是希望遵循不要重複自己 (DRY) 原則，以保持我們的程式碼小巧、乾淨且易於管理，因此我們需要一個可以接受開發人員需要的任何列舉的外掛程式。

因此，我們軟體的目標是擁有一個函式，該函式將接受一個值陣列，該陣列定義列舉中的值及其順序（升序 - 降序將由 DataTables 自動處理）

DataTable.enum( [ ... ] );

對應

在深入研究程式碼之前，我們先來考慮如何實作排序和類型偵測外掛程式。本質上，我們只需要檢查資料點是否在來源陣列中，如果是，則它的位置是什麼。我們可以使用 Array.prototype.indexOf 或 jQuery 的 $.inArray 來支援舊版瀏覽器，但這些不可避免地會導致對陣列資料進行迴圈，這會影響效能。

相反，我們可以建立一個反向對應物件，其中值是屬性鍵，允許快速查詢，而屬性值是索引。考慮我們的 [ '高', '中', '低' ] 範例 - 它將變成

{
    "High": 0,
    "Medium": 1,
    "Low": 2
}

這種方法的缺點是在 ES5 中，物件鍵僅限於字串 - 因此，如果您使用的是不容易轉換為唯一字串的複雜物件 (.toString())，您可能會遇到衝突。ES6 引入了 Map 物件，專門為這種情況設計。

現代瀏覽器對 Map 的支援相當好，但當然並非我們所有的客戶都使用最新的瀏覽器，因此我們需要在適當的情況下回退到物件。

因此，我們的對應程式碼非常簡單

var lookup = window.Map ? new Map() : {};

for ( var i=0, ien=arr.length ; i<ien ; i++ ) {
    lookup[ arr[i] ] = i;
}

外掛程式

有了查找映射，我們現在可以為 DataTables 建立類型偵測和排序外掛程式。

類型偵測

DataTables 的類型偵測外掛程式會附加到 DataTable.ext.type.detect 陣列。這是一個函式陣列，DataTables 會迴圈處理，檢查欄中的資料是否符合任何給定的類型。

在我們的例子中，我們只需要檢查查找物件是否包含 DataTables 正在檢查的資料點的值

DataTable.ext.type.detect.unshift( function ( d ) {
    return lookup[ d ] !== undefined ?
        name :
        null;
} );

請注意，unshift 用於將類型偵測函式加到陣列的開頭，以確保 DataTables 在任何其他函式之前使用此類型偵測。

此外，請注意變數 name 的使用，它是此資料類型的唯一名稱。它只是一個帶有字首 enum- 的計數器，以確保可以在單一頁面上使用多個列舉！

排序外掛程式

排序外掛程式會附加到 DataTable.ext.type.order 物件，使用排序方法將應用到的 _type_ 的名稱。DataTables 內建了數值和字串值的排序比較，因此我們需要做的就是建立一個外掛程式，該外掛程式將傳回一個可以排序的值 - 在本例中，該值是資料點的陣列索引，該索引已經存在於我們的查找物件中

DataTable.ext.type.order[ name+'-pre' ] = function ( d ) {
    return lookup[ d ];
};

將所有內容整合在一起

結果是，我們擁有一個非常簡單但功能非常強大的外掛程式，可以用於以您要求的任何順序排序任何資料

var unique = 0;

DataTable.enum = function ( arr ) {
    var name = 'enum-'+(unique++);
    var types = DataTable.ext.type;
    var lookup = {};

    for ( var i=0, ien=arr.length ; i<ien ; i++ ) {
        lookup[ arr[i] ] = i;
    }

    // Add type detection
    types.detect.unshift( function ( d ) {
        return lookup[ d ] !== undefined ?
            name :
            null;
    } );

    // Add sorting method
    types.order[ name+'-pre' ] = function ( d ) {
        return lookup[ d ];
    };
};

只需從上方複製程式碼即可使用此外掛程式，或者您可以直接從 DataTales CDN 中包含它。

回饋

一如既往，我們熱烈歡迎回饋。如果您看到任何可以改進的地方，請隨時開啟新的論壇討論，或分叉 DataTables 外掛程式儲存庫並透過您的更改發送提取請求。