dhtmlx-gantt相關配置

一：搜索功能

上次文章里面沒有寫，這次提一下吧，其實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;
}

原地址：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;

六：工作時間設置為小時

如圖所示為時間設置，原地址：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