dhtmlx-gantt相关配置

一:搜索功能

上次文章里面没有写,这次提一下吧,其实dhtmlxGantt甘特图里面自带搜索功能的如图所示dhtmlx-gantt相关配置

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

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;

            返回虚假;
        });

二:新增,编辑,删除功能按钮实现

如图所示

dhtmlx-gantt相关配置

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

//添加操作按钮标签
        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;
        }

 

三:设置具体时间格式

dhtmlx-gantt相关配置

如图所示,代码如下:可直接引用

        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
        }];

四:实现工作时间突出周末颜色dhtmlx-gantt相关配置

下面是具体代码

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

原地址:https//docs.dhtmlx.com/gantt/desktop__highlighting_time_slots.html

五:实现任务移动拖拽功能

原地址:https//docs.dhtmlx.com/gantt/api__gantt_order_branch_config.html

以下代码可实现移动,具体保存自己实现(有移动后的方法onAfterTaskMove)

gantt.config.order_branch = true; //实现拖
插gantt.config.order_branch_free = true;

六:工作时间设置为小时

dhtmlx-gantt相关配置

如图所示为时间设置,原地址:https://docs.dhtmlx.com/gantt/desktop__working_time.html#multipleworktimecalendars

设置之后默认为0-24小时都显示,只有购买的情况下,可以使用代码隐藏不需要的时间(如图8-16)

隐藏时间单位:https//docs.dhtmlx.com/gantt/desktop__custom_scale.html

如图的参考网页地址:https//docs.dhtmlx.com/gantt/samples/09_worktime/04_custom_workday_duration.html

 

上一篇:2年内成准独角兽,影刀RPA登榜2021杭州独角兽&准独角兽企业榜单


下一篇:RPA逆势火了