如何在dhtmlxGantt網格中對任務進行排序和重新排序

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

重新排序任務

dhtmlxGantt提供了兩種在網格中對任務進行重新排序的方法：

1. 拖放
2. 排序

這些方法是替代的。預設情況下，兩種模式都是禁用的。

要啟用拖放重排序，請使用order_branch選項：

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

您可以看一下影片指南，該指南顯示瞭如何在網格中對任務進行排序和重新排序。

在整個甘特結構中拖放

該order_branch選項允許同一樹級別中拖動任務。

也可以啟用可以在整個甘特圖中重新排序任務的模式。這意味著一個任務可以替換任何樹級別的另一個任務。要使用這種型別的任務重新排序，請使用order_branch_free選項：

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

拒絕掉到特定位置

要拒絕將任務放到特定位置，請使用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;
});

改善大型資料集的效能

如果您的甘特圖中包含很多工，則分支重排序的預設模式可能會降低效能。為了加快速度，您可以使用“標記”模式。

gantt.config.order_branch = "marker";

在此模式下，僅將任務名稱重新排序（按住滑鼠左鍵），並且僅當將任務放在目標位置時（釋放鍵）才重新渲染甘特圖。與預設模式不同，更改任務位置不涉及觸發onBeforeTaskMove / onAfterTaskMove事件。

為防止任務掉落到特定位置，請改用onBeforeRowDragMove事件（僅在“標記”模式下有效）。

拖放時突出顯示可用放置位置

要在拖動過程中突出顯示可用的目標位置（例如，不可能將根節點拖動到另一個根目錄下，並且您想在視覺上通知使用者此資訊），請使用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 "";
};