关于dhtmlxGantt甘特图的一些设置

最新推荐文章于 2025-06-20 22:04:44 发布

原创

最新推荐文章于 2025-06-20 22:04:44 发布 · 1.8w 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#dhtmlxGant

继上次关于wex5的文章之后，这次来写写dhtmlxGantt甘特图的一些基本设置，可以展示一些更多的功能实现，代码的话在平台里面是可以直接引用的，下面来介绍一下有哪些设置（上一篇关于wex5如何使用dhtmlxGantt甘特图）

一：搜索功能

上次文章里面没有写，这次提一下吧，其实dhtmlxGantt甘特图里面自带搜索功能的如图所示

下面是代码展示：第一部分里面是设置列的，这里只显示需要的列，只需要按照如下添加一个标签，就可展示搜索框，主要实现功能是下面的搜索任务那部分，可直接用

gantt.config.columns = [{//初始化列
           名：“text”，
           标签：“<div class ='searchEl'>任务名称<input id ='search'style ='height：40px'type ='text' “+”占位符='搜索任务...'> </ div>“，
           树：true，
           宽度：'*'
       //编辑：textEditor
       }

var inputEl = document.getElementById（'search'）; //搜索任务
       inputEl.oninput = function（）{
           gantt.refreshData（）;
       }
       功能hasSubstr（parentId的）{
           VAR任务= gantt.getTask（parentId的）;
           if（task.text.toLowerCase（）。indexOf（inputEl.value.toLowerCase（））！== -1）
               return true;

           var child = gantt.getChildren（parentId）;
           for（var i = 0; i <child.length; i ++）{
               if（hasSubstr（child [i]））