跳到主要内容

任务重新排序

dhtmlxGantt 提供了两种在表格中重新排序任务的方法:

  1. 拖放操作。
  2. 排序（参见详情）。

这两种方法互斥。默认情况下，两者均为关闭状态。

要启用拖放重新排序功能，请设置 order_branch 选项:

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

Branch ordering

此外，还有一个视频教程演示了如何在表格中排序和重新排序任务。

跨整个 Gantt 结构拖放​

order_branch 选项限制只能在同一树级别内拖动任务。

不过，也可以启用一种模式，使任务可以在 Gantt 的任意位置重新排序，允许任务替换任何树级别的其他任务。要启用此功能，请使用 order_branch_free 选项:

// 在整个 gantt 内重新排序任务
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;

gantt.init("gantt_here");

Drag and drop rows in Grid

限制拖放位置​

如需防止任务被拖放到某些位置，请使用 onBeforeTaskMove 或 onBeforeRowDragEnd 事件:

// 防止移动到其他子分支：
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

// 或者
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

提升大数据集下的性能​

当处理大量任务时，默认的分支重排序模式可能会影响性能。为提升性能，可以使用"marker"模式。

gantt.config.order_branch = "marker";

Branch ordering - highlighting mode

在该模式下，仅任务名称会随着鼠标左键按下而移动，只有在任务被释放后 Gantt 图才会重新渲染。与默认模式不同，改变任务位置不会触发 onBeforeTaskMove 或 onAfterTaskMove 事件。

如需在该模式下限制任务拖放位置，请使用 onBeforeRowDragMove 事件（仅在 "marker" 模式下有效）。

拖放时高亮可用的放置目标​

如需在拖动过程中直观地显示有效的放置目标（例如，防止根节点被拖到另一个根节点下），请使用 onRowDragStart 和 onRowDragEnd 事件:

gantt.config.order_branch = true; // 仅在分支内排序任务
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 "";
};

在时间轴中垂直重新排序任务​

请参考如何在时间轴中垂直重新排序任务部分中的示例。