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

點擊下載dhtmlxGantt試用版

在這里，我們提供了有關JavaScript Gantt配置的新視頻教程。我們將學習在dhtmlxGantt網格中實現過濾和搜索任務的通用方法：

讓我們看一下基本文本過濾器的示例。用戶輸入一些內容–我們僅顯示與所選內容匹配的任務：

此類過濾器由兩部分組成：

• 允許用戶選擇過濾條件的UI控件
• 用于管理甘特圖中行可見性的代碼

我們已經知道如何添加UI控件，并且知道將在用戶輸入上更新過濾器。

現在，我們如何過濾甘特圖中的任務？

dhtmlxGantt中沒有過濾任務方法。相反，有一個API事件稱為onBeforeTaskDisplay：

gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
    if (task.priority == "high"){
        return true;
    }
    return false;
});

完整重繪甘特圖數據期間，將為每個任務調用此事件。我們可以將此事件的處理程序添加到我們的代碼中，并跳過與過濾器值不匹配的任務的呈現。

首先，我們在網格標題中添加一個文本字段：

var textFilter = "<input data-text-filter type='text' oninput='gantt.$doFilter(this.value)'>"
  gantt.config.columns = [
    {name: "text", label: textFilter, tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"}
  ];

在oninput處理程序內，我們將存儲過濾器的當前值，并使用甘特圖渲染方法觸發甘特圖的重繪：

var filterValue = "";
  var delay;
  gantt.$doFilter = function(value){
    filterValue = value;
    clearTimeout(delay);
    delay = setTimeout(function(){
      gantt.render();
      gantt.$root.querySelector("[data-text-filter]").focus();

    }, 200) 
  }

甘特圖渲染方法會導致甘特圖完全重繪，在此期間，將為每個任務調用onBeforeTaskDisplay事件。 然后，我們檢查任務是否符合過濾條件，并決定是否顯示它。

  gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
   if(!filterValue) return true;

    var normalizedText = task.text.toLowerCase();
    var normalizedValue = filterValue.toLowerCase();
    return normalizedText.indexOf(normalizedValue) > -1;
  });

在此階段，例如，您可能希望在網格中包含多行標題，以便在過濾器上方顯示列名。

壞消息是，Gantt沒有內置的多行標題配置。但是，我們可以采用與使用自定義HTML內容首先添加過濾器相同的方式來繞過它。我們可以在列標簽內顯示多行：

var scaleHeight = gantt.config.scale_height;
  var textFilter = [
        "<div class='gantt-sub-header' style='line-height:"+scaleHeight/2+"px'>",
        "<div>Name</div>",
        "<div>Search: <input data-text-filter type='text' oninput='gantt.$doFilter(this.value)'></div>",
        "</div>"
    ].join("");

實施列跨度或行跨度并不是那么簡單，因此希望您將不需要它。

我們邀請您嘗試使用免費評估版自己構建自己的JavaScript Gantt來篩選任務。請按照本文和我們的視頻教程中所述的步驟進行操作。

dhtmlxGantt可以集成到APS生產計劃排程系統中，實現計劃修改、滾動排程、臨時插單等高級智能功能，幫助企業實現數字化或智能工廠的轉型。

相關產品推薦：

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

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

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

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