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

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

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

dhtmlxGantt试用版

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

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

• 允许用户选择过滤条件的UI控件
• 用于管理甘特图中行可见性的代码

我们已经知道如何添加UI控件，并且知道将在用户输入上更新过滤器。

现在，我们如何过滤甘特图中的任务/strong>

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

实施列跨度或行跨度并不是那么简单，因此希望您将不需要它。

dhtmlxGantt可以集成到APS生产计划排程系统中，实现计划修改、滚动排程、临时插单等高级智能功能，帮助企业实现数字化或智能工厂的转型。

相关产品推荐：

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

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

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

phGantt Time Package：对任务和时间的分配管理的甘特图

想要购买dhtmlxGantt正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：