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