這篇文章給大家講解dhtmlxGantt如何實現列的排序。

DhtmlxGantt正版試用下載

dhtmlxGantt能實現對網格列中的數據進行排序（在客戶端）。

有兩種方法可以實現網格排序：

1. 通過單擊具有啟用排序屬性的列的標題；
2. 由排序方法的API 調用（可以從一些事件或動作中調用，即按鈕單擊或頁面加載）。

1、通過單擊標題進行排序

一旦用戶單擊標題，甘特圖就會顯示一個特殊的控件，指示該表當前按哪一列排序以及該排序的方向（升序或降序）。下一次單擊同一標題將反轉排序方向。

要在甘特圖中啟用排序，請將sort屬性設置為true：

gantt.config.sort = true; 
gantt.init("gantt_here");

2、程序化排序

要根據某些操作或事件（即按鈕單擊或頁面加載）對網格進行排序，請調用sort方法。

點擊按鈕排序：

<input type='button' value='Sort by task name' onclick='gantt.sort("text", true);'>
 
<script type="text/javascript" charset="utf-8">
    gantt.init("gantt_here"); 
    gantt.parse(tasks);
</script>

3、自定義排序功能

要將自定義排序函數應用于網格，請使用自定義函數的名稱作為第一個（也是唯一的）參數調用sort方法。

為每對相鄰值調用自定義排序函數并返回 1、-1 或 0：

• 1 - 具有第一個值的對象必須在第二個之前；
• -1 - 第二個對象在第一個之前；
• 0 - 兩個對象的順序不變。

使用自定義函數對甘特圖進行排序：

<input type='button' value='Sort by the number of holders' 
       onclick='sortByHolders(direction)'>
 
<script type="text/javascript" charset="utf-8">
    var direction = false;
 
    function sortByHolders(direction1){
        direction = !direction;
        gantt.sort(sortHolders);
    };
    function sortHolders(a,b){
         a = a.users.length;
         b = b.users.length;
 
         if (direction){
            return a>b?1:(a<b?-1:0);
         } else {
            return a>b?-1:(a<b?1:0);
         }
    };
</script>

4、每列網格排序

可以為每個特定列指定自定義排序規則。每列有三種最常見的排序方案：

1) 通過將sort設置為 false 來禁用對列的排序

gantt.config.columns[1].sort = false;

2) 通過將sort設置為函數，根據提供的排序函數對列進行排序

gantt.config.columns[1].sort = function(a,b){
    return custom_function(a,b);
};

為一對任務對象（a 和 b）調用自定義排序函數并返回 1、-1 或 0：

1 - 具有第一個值的對象必須在第二個之前；

• -1 - 第二個對象在第一個之前；
• 0 - 兩個對象的順序不變。
• 3）通過將排序設置為該字段，根據任務的不同字段的值對列進行排序

gantt.config.columns[1].sort = 'other_field';

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！