dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

dhtmlxGantt允許您在網格的列中（在客戶端上）對數據進行排序。

您可以通過2種方式在網格中進行排序：

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

通過單擊標題進行排序

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

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

要對某些操作或事件（即按鈕單擊或頁面加載）進行網格排序，請調用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>

要將自定義排序功能應用于網格，請使用您的自定義函數名稱作為第一個（也是唯一一個）參數來調用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>

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

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

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

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

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

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

關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖

APS幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率