甘特图dhtmlxGantt使用教程：如何在JavaScript Gantt中过滤任务-控件新闻-慧都网

甘特图dhtmlxGantt使用教程：如何在JavaScript Gantt中过滤任务

翻译|使用教程|编辑：莫成敏|2020-06-02 11:11:59.103|阅读 1290 次

概述：我们将学习在dhtmlxGantt网格中实现过滤和搜索任务的通用方法。

相关链接：

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

在这里，我们提供了有关JavaScript Gantt配置的新视频教程。我们将学习在dhtmlxGantt网格中实现过滤和搜索任务的通用方法：

让我们看一下基本文本过滤器的示例。用户输入一些内容–我们仅显示与所选内容匹配的任务：

甘特图dhtmlxGantt使用教程：如何在JavaScript Gantt中过滤任务

此类过滤器由两部分组成：

允许用户选择过滤条件的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;
  });

在此阶段，例如，您可能希望在网格中包含多行标题，以便在过滤器上方显示列名。

甘特图dhtmlxGantt使用教程：如何在JavaScript Gantt中过滤任务

坏消息是，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生产计划排程系统中，实现计划修改、滚动排程、临时插单等高级智能功能，帮助企业实现数字化或智能工厂的转型。