dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表?？?滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(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試用版

重新排序任務(wù)

dhtmlxGantt提供了兩種在網(wǎng)格中對(duì)任務(wù)進(jìn)行重新排序的方法：

1. 拖放
2. 排序

要啟用拖放重排序，請(qǐng)使用order_branch選項(xiàng)：

gantt.config.order_branch = true;
gantt.init("gantt_here");

該order_branch選項(xiàng)允許同一樹級(jí)別中拖動(dòng)任務(wù)。

也可以啟用可以在整個(gè)甘特圖中重新排序任務(wù)的模式。這意味著一個(gè)任務(wù)可以替換任何樹級(jí)別的另一個(gè)任務(wù)。要使用這種類型的任務(wù)重新排序，請(qǐng)使用order_branch_free選項(xiàng)：

// reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");

要拒絕將任務(wù)放到特定位置，請(qǐng)使用onBeforeTaskMove或onBeforeRowDragEnd事件：

//prevent moving to another sub-branch:
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
 
//or
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

如果您的甘特圖中包含很多任務(wù)，則分支重排序的默認(rèn)模式可能會(huì)降低性能。為了加快速度，您可以使用“標(biāo)記”模式。

gantt.config.order_branch = "marker";

為防止任務(wù)掉落到特定位置，請(qǐng)改用onBeforeRowDragMove事件（僅在“標(biāo)記”模式下有效）。

拖放時(shí)突出顯示可用放置位置

要在拖動(dòng)過程中突出顯示可用的目標(biāo)位置（例如，不可能將根節(jié)點(diǎn)拖動(dòng)到另一個(gè)根目錄下，并且您想在視覺上通知用戶此信息），請(qǐng)使用onRowDragStart和onRowDragEnd事件：

gantt.config.order_branch = true;// order tasks only inside a branch
gantt.init("gantt_here");
gantt.parse(demo_tasks);
 
var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {
    drag_id = id;
    return true;
});
gantt.attachEvent("onRowDragEnd", function(id, target) {
    drag_id = null;
    gantt.render();
});
 
gantt.templates.grid_row_class = function(start, end, task){
    if(drag_id && task.id != drag_id){
        if(task.$level != gantt.getTask(drag_id).$level)
            return "cant-drop";
        }
    return "";
};

關(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ǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率