這篇文章給大家講解dhtmlxGantt樹列配置設(shè)置。

DhtmlxGantt正版試用下載

1、展開/折疊任務(wù)分支

• 要打開任務(wù)分支，請使用open方法：

var data = {
  tasks:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
     {id:"t_1", text:"Task #1",    start_date:"02-04-2020", duration:8,
     parent:"p_1"}
]};
gantt.open("p_1");

• 要關(guān)閉任務(wù)分支，請使用close方法：

var data = {
  tasks:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
     {id:"t_1", text:"Task #1",    start_date:"02-04-2020", duration:8,
     parent:"p_1"}
]};
gantt.close("p_1");

2、展開/折疊多個(gè)分支

如果您需要打開/關(guān)閉多個(gè)任務(wù)分支，最快的方法是以編程方式將相應(yīng)的布爾值（true - 打開，false - 關(guān)閉）設(shè)置為所需任務(wù)的.$open屬性，然后重新繪制甘特圖。

• 擴(kuò)展所有任務(wù)：

gantt.eachTask(function(task){
    task.$open = true;
});
gantt.render();

• 折疊所有任務(wù)：

gantt.eachTask(function(task){
    task.$open = false;
});
gantt.render();

3、獲取子級任務(wù)

要獲取分支任務(wù)的子任務(wù)，請使用getChildren方法：

var data = {
  tasks:[
     {id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},
     {id:"t_1", text:"Task #1",    start_date:"02-04-2020", duration:8,
     parent:"p_1"}
]};
gantt.getChildren("p_1");//->["t_1"]

4、更改樹的圖標(biāo)

父項(xiàng)

要設(shè)置父項(xiàng)的圖標(biāo)，請使用grid_folder模板：

gantt.templates.grid_folder = function(item) {
    return "<div class='gantt_tree_icon gantt_folder_" +
    (item.$open ? "open" : "closed") + "'></div>";
};

子項(xiàng)

要設(shè)置子項(xiàng)的圖標(biāo)，請使用grid_file模板：

gantt.templates.grid_file = function(item) {
    return "<div class='gantt_tree_icon gantt_file'></div>";
};

打開/關(guān)閉標(biāo)志

要設(shè)置打開/關(guān)閉符號的圖標(biāo)，請使用grid_open模板：

gantt.templates.grid_open = function(item) {
    return "<div class='gantt_tree_icon gantt_" + 
    (item.$open ? "close" : "open") + "'></div>";
};

5、在分支中設(shè)置子項(xiàng)的縮進(jìn)

要設(shè)置分支中子任務(wù)的縮進(jìn)，請使用grid_indent模板（更改寬度CSS 屬性）：

gantt.templates.grid_indent=function(task){
    return "<div style='width:20px; float:left; height:100%'></div>"
};

6、向樹節(jié)點(diǎn)添加復(fù)選框

要將復(fù)選框（或任何其他 HTML 內(nèi)容）添加到樹節(jié)點(diǎn)，請使用grid_blank模板：

gantt.templates.grid_blank=function(task){
    return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"
};

7、設(shè)置樹節(jié)點(diǎn)的模板

要為樹節(jié)點(diǎn)設(shè)置模板，請使用columns屬性中的模板屬性。模板函數(shù)的返回值將作為內(nèi)部 HTML 添加。這就是為什么您可以在屬性中使用任何HTML結(jié)構(gòu)。

gantt.config.columns=[
    {name:"text",       label:"Task name",  tree:true, width:230, template:myFunc },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" }
];
gantt.init("gantt_here");
 
function myFunc(task){
    if(task.priority ==1)
        return "<div class='important'>"+task.text+" ("+task.users+") </div>";
    return task.text+" ("+task.users+")";
};

dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表，可滿足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請點(diǎn)這里！