dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的JavaScript / HTML5甘特圖，允許你創(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正式版

在管理項(xiàng)目時(shí)，用戶可能需要更改任務(wù)順序或在多個(gè)甘特項(xiàng)目之間移動(dòng)任務(wù)。今天，我們將熟悉在dhtmlxGantt中實(shí)現(xiàn)此功能的方式。

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

• 通過拖放
• 通過分類

默認(rèn)情況下，兩種模式均禁用。

為了通過拖放操作使任務(wù)重新排序，我們需要將order_branch選項(xiàng)設(shè)置為'true'：

// ordering tasks only inside a branch
gantt.config.order_branch = true;

gantt.init("gantt_here");

order_branch屬性激活“分支”模式，該模式可對(duì)同一嵌套級(jí)別內(nèi)的任務(wù)的重新排序。

更改任務(wù)位置涉及觸發(fā)onBeforeTaskMove或onAfterTaskMove事件。第一個(gè)可以用來控制任務(wù)可以移到哪里。為了防止移動(dòng)到另一個(gè)子分支，請(qǐng)使用onBeforeTaskMove事件：

gantt.config.order_branch = true;
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
gantt.init("gantt_here");

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

gantt.config.order_branch = "marker";

在此模式下，僅將任務(wù)名稱重新排序（按住鼠標(biāo)左鍵），并且僅當(dāng)任務(wù)放在目標(biāo)位置時(shí)（松開鍵）才重新渲染甘特圖：

與默認(rèn)模式不同，更改任務(wù)位置不涉及觸發(fā)onBeforeTaskMove或onAfterTaskMove事件。為防止任務(wù)掉到特定位置，我們可以改用onBeforeRowDragMove事件。請(qǐng)注意，它僅在“標(biāo)記”模式下有效：

// ordering tasks only inside a branch
gantt.config.order_branch = "marker";
gantt.attachEvent("onBeforeRowDragMove", function(id, parent, tindex){
        var task = gantt.getTask(id);
        if(task.parent != parent)
                return false;
        return true;
});
gantt.init("gantt_here");

希望我們的教程對(duì)您有所幫助！如果您想親自試用dhtmlxGantt，請(qǐng)下載30天免費(fèi)評(píng)估版。

dhtmlxGantt可以集成到APS系統(tǒng)中，助力生產(chǎn)排程工作！還可以進(jìn)行慧都資源調(diào)度系統(tǒng)定制，幫助企業(yè)完善資源管理，簡(jiǎn)化資源計(jì)劃，實(shí)現(xiàn)利潤(rùn)增加！