dhtmlxGantt使用教程：如何在JavaScript甘特圖的網格中對任務進行排序和從新排序

dhtmlxGantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的JavaScript / HTML5甘特圖，容許你建立動態甘特圖，並以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你能夠顯示活動之間的依賴關係，顯示具備完成百分比陰影的當前任務狀態以及組織活動到樹結構。

在管理項目時，用戶可能須要更改任務順序或在多個甘特項目之間移動任務。今天，咱們將熟悉在dhtmlxGantt中實現此功能的方式。

咱們的HTML5 Gantt提供了兩種在網格中對任務進行從新排序的替代方法：

• 經過拖放

• 經過分類

默認狀況下，兩種模式均禁用。

爲了經過拖放操做使任務從新排序，咱們須要將order_branch選項設置爲'true'：

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

gantt.init("gantt_here");

order_branch屬性激活「分支」模式，該模式可對同一嵌套級別內的任務的從新排序。

更改任務位置涉及觸發onBeforeTaskMove或onAfterTaskMove事件。第一個能夠用來控制任務能夠移到哪裏。爲了防止移動到另外一個子分支，請使用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");

若是甘特圖中包含不少任務，則分支從新排序的默認模式可能會下降性能。爲了加快速度，您可使用「標記」模式：

gantt.config.order_branch = "marker";

在此模式下，僅將任務名稱從新排序（按住鼠標左鍵），而且僅當任務放在目標位置時（鬆開鍵）才從新渲染甘特圖：

與默認模式不一樣，更改任務位置不涉及觸發onBeforeTaskMove或onAfterTaskMove事件。爲防止任務掉到特定位置，咱們能夠改用onBeforeRowDragMove事件。請注意，它僅在「標記」模式下有效：

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

但願咱們的教程對您有所幫助！若是您想親自試用dhtmlxGantt，請下載30天免費評估版。連接：https://www.evget.com/product/4213/download