dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表?？蓾M足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。

點擊下載dhtmlxGantt試用版

在這里，我們提供了有關(guān)JavaScript Gantt配置的新視頻教程。我們將學(xué)習(xí)在dhtmlxGantt網(wǎng)格中實現(xiàn)過濾和搜索任務(wù)的通用方法：

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

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

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

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

現(xiàn)在，我們?nèi)绾芜^濾甘特圖中的任務(wù)？

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

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

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

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

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處理程序內(nèi)，我們將存儲過濾器的當前值，并使用甘特圖渲染方法觸發(fā)甘特圖的重繪：

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) 
  }

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

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

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

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

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

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("");

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

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

dhtmlxGantt可以集成到APS生產(chǎn)計劃排程系統(tǒng)中，實現(xiàn)計劃修改、滾動排程、臨時插單等高級智能功能，幫助企業(yè)實現(xiàn)數(shù)字化或智能工廠的轉(zhuǎn)型。

相關(guān)產(chǎn)品推薦：

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

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

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

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