這篇文章給大家講解dhtmlxGantt如何實現(xiàn)重新排序。

DhtmlxGantt正版試用下載

dhtmlxGantt 提供了 2 種方式在網(wǎng)格中重新排序任務：

1. 拖放。
2. 排序。

方法是可選的。默認情況下，這兩種模式都被禁用。

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

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

1、在整個甘特結(jié)構(gòu)中拖放

order_branch選項允許在同一樹級別內(nèi)拖動任務。

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

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

2、拒絕下降到特定位置

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

3、提高大型數(shù)據(jù)集的性能

如果您的甘特圖包含大量任務，則分支重新排序的默認模式可能會降低性能。為了加快速度，您可以使用“標記”模式。

gantt.config.order_branch = "marker";

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

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

4、拖放時突出顯示可用的放置位置

要在拖動過程中突出顯示可用的目標位置（例如，不能將根節(jié)點拖動到另一個根節(jié)點下，并且您希望直觀地告知用戶這一點），請使用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 "";
};

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請點這里！