dhtmlx-gantt相关配置

2024-01-27 13:01:16

一：搜索功能

上次文章里面没有写，这次提一下吧，其实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]））
                   return true;
           }
           return false;
       }
       gantt.attachEvent（“onBeforeTaskDisplay”，function（id，task）{
           if（hasSubstr（id））
               return true;

           返回虚假;
       }）;

二：新增，编辑，删除功能按钮实现

如图所示

其中右边的就是这些功能按钮，具体实现代码如下

//添加操作按钮标签
       var colHeader ='<div class =“gantt_grid_head_cell gantt_grid_head_add”onclick =“gantt.createTask（）”> </ div>'，colContent = function（task）{
           return（'<i class =“fa gantt_button_grid gantt_grid_edit fa-pencil”onclick =“clickGridButton（\'edit \'）”> </ i>'
                   +'<i class =“fa gantt_button_grid gantt_grid_add fa-plus”onclick =“ clickGridButton（\'add \'）“> </ i>'
                   +'<i class =”

以上是添加标签的方法，这里适用于平台，毕竟原先的JS与平台的js有点冲突（不能传参，可参考全局变量或其他方法），调用的onclick传不了值，想要看原代码的参考以下

功能按钮原文档地址：https：//docs.dhtmlx.com/gantt/desktop__styling_guide.html

继续刚刚的，只有上面的代码还不行，还必须引用

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css这里引用的是网上的地址，可直接引用

实现CSS样式如下：

.fa {
           cursor：pointer;
           font-size：14px;
           text-align：center;
           不透明度：0.2;
           填充：5px;
       }

       .fa：hover {
           opacity：1;
       }

       .fa-pencil {
           color：#ffa011;
       }

       .fa-plus {
           color：＃328EA0;
       }

       .fa-times {
           color：red;
       }

三：设置具体时间格式

如图所示，代码如下：可直接引用

gantt.config.scale_unit =“day”;
       gantt.config.date_scale =“％D，％d”;
       gantt.config.min_column_width = 60;
       gantt.config.duration_unit =“day”;
       gantt.config.scale_height = 20 * 3;
       gantt.config.row_height = 28;

       var weekScaleTemplate = function（date）{
           var dateToStr = gantt.date.date_to_str（“％d％M”）;
           var weekNum = gantt.date.date_to_str（“（周％W）”）;
           var endDate = gantt.date.add（gantt.date.add（date，1，“week”）， - 1，“day”）;
           return dateToStr（date）+“ - ”+ dateToStr（endDate）+“”+ weekNum（date）;
       };

       gantt.config.subscales = [{
           unit：“month”，
           step：1，
           date：“％F，％Y”
       }，{
           unit：“week”，
           step：1，
           template：weekScaleTemplate
       }];

四：实现工作时间突出周末颜色

下面是具体代码

gantt.templates.scale_cell_class = function（date）{
           //调试器;
           if（date.getDay（）== 0 || date.getDay（）== 6）{
               // alert（date.getDay（））;
               返回“周末”;
           }
       };
       gantt.templates.task_cell_class = function（item，date）{
           // debugger;
           if（date.getDay（）== 0 || date.getDay（）== 6）{
               return“weekend”;
           }
       };

//样式

.weekend {
   background：＃f4f7f4;
}

.gantt_selected .weekend {
   background：＃f7eb91;
}