dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

擴展/折疊任務分支

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

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");

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

擴展所有任務：

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

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

要獲取分支任務的子代，請使用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"]

更改樹的圖標

父項

要為父項設置圖標，請使用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>";
};

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

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

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

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

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

請注意，如果你不使用dhtmlxConnector來與服務器端的整合，你必須消毒，以防止可能的XSS攻擊你加載到甘特圖中的數據（dhtmlxConnector自動完成它）

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+")";
};

關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖

APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率