dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。它允許你創(chuàng)建動(dòng)態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動(dòng)之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

擴(kuò)展/折疊任務(wù)分支

要打開任務(wù)分支，請(qǐng)使用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");

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

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

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

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

要獲取分支任務(wù)的子代，請(qǐng)使用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"]

更改樹的圖標(biāo)

父項(xiàng)

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

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)產(chǎn)品推薦：

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

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺(tái)jQuery Gantt包

phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖

APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率