這篇文章給大家講解dhtmlxGantt如何實(shí)現(xiàn)列的排序。

DhtmlxGantt正版試用下載

dhtmlxGantt能實(shí)現(xiàn)對(duì)網(wǎng)格列中的數(shù)據(jù)進(jìn)行排序（在客戶端）。

有兩種方法可以實(shí)現(xiàn)網(wǎng)格排序：

1. 通過單擊具有啟用排序?qū)傩缘牧械臉?biāo)題；
2. 由排序方法的API 調(diào)用（可以從一些事件或動(dòng)作中調(diào)用，即按鈕單擊或頁面加載）。

1、通過單擊標(biāo)題進(jìn)行排序

一旦用戶單擊標(biāo)題，甘特圖就會(huì)顯示一個(gè)特殊的控件，指示該表當(dāng)前按哪一列排序以及該排序的方向（升序或降序）。下一次單擊同一標(biāo)題將反轉(zhuǎn)排序方向。

要在甘特圖中啟用排序，請(qǐng)將sort屬性設(shè)置為true：

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

2、程序化排序

要根據(jù)某些操作或事件（即按鈕單擊或頁面加載）對(duì)網(wǎng)格進(jìn)行排序，請(qǐng)調(diào)用sort方法。

點(diǎn)擊按鈕排序：

<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、自定義排序功能

要將自定義排序函數(shù)應(yīng)用于網(wǎng)格，請(qǐng)使用自定義函數(shù)的名稱作為第一個(gè)（也是唯一的）參數(shù)調(diào)用sort方法。

為每對(duì)相鄰值調(diào)用自定義排序函數(shù)并返回 1、-1 或 0：

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

使用自定義函數(shù)對(duì)甘特圖進(jìn)行排序：

<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、每列網(wǎng)格排序

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

1) 通過將sort設(shè)置為 false 來禁用對(duì)列的排序

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

2) 通過將sort設(shè)置為函數(shù)，根據(jù)提供的排序函數(shù)對(duì)列進(jìn)行排序

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

為一對(duì)任務(wù)對(duì)象（a 和 b）調(diào)用自定義排序函數(shù)并返回 1、-1 或 0：

1 - 具有第一個(gè)值的對(duì)象必須在第二個(gè)之前；

• -1 - 第二個(gè)對(duì)象在第一個(gè)之前；
• 0 - 兩個(gè)對(duì)象的順序不變。
• 3）通過將排序設(shè)置為該字段，根據(jù)任務(wù)的不同字段的值對(duì)列進(jìn)行排序

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

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

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請(qǐng)點(diǎn)這里！