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

DhtmlxGantt正版試用下載

1、展開/折疊任務分支

• 要打開任務分支，請使用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");

• 要關閉任務分支，請使用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、展開/折疊多個分支

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

• 擴展所有任務：

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

• 折疊所有任務：

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

3、獲取子級任務

要獲取分支任務的子任務，請使用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、更改樹的圖標

父項

要設置父項的圖標，請使用grid_folder模板：

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

子項

要設置子項的圖標，請使用grid_file模板：

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

打開/關閉標志

要設置打開/關閉符號的圖標，請使用grid_open模板：

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

5、在分支中設置子項的縮進

要設置分支中子任務的縮進，請使用grid_indent模板（更改寬度CSS 屬性）：

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

6、向樹節點添加復選框

要將復選框（或任何其他 HTML 內容）添加到樹節點，請使用grid_blank模板：

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

7、設置樹節點的模板

要為樹節點設置模板，請使用columns屬性中的模板屬性。模板函數的返回值將作為內部 HTML 添加。這就是為什么您可以在屬性中使用任何HTML結構。

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是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！