半岛外围网上直营

这篇文章给大家讲解dhtmlxGantt如何实现重新排序。

DhtmlxGantt正版试用下载

dhtmlxGantt 提供了 2 种方式在网格中重新排序任务：

1. 拖放。
2. 排序。

方法是可选的。默认情况下，这两种模式都被禁用。

要启用拖放重新排序，请使用order_branch选项：

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

1、在整个甘特结构中拖放

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

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、提高大型数据集的性能

如果您的甘特图包含大量任务，则分支重新排序的默认模式可能会降低性能。为了加快速度，您可以使用“标记”模式。

gantt.config.order_branch = "marker";

在此模式下，仅重新排序任务的名称（按住鼠标左键），并且仅当将任务放在目标位置（释放键）时才重新渲染甘特图。与默认模式不同，任务位置的更改不涉及触发 onBeforeTaskMove/onAfterTaskMove 事件。

要防止将任务放在特定位置，请改用onBeforeRowDragMove事件（仅在“标记”模式下有效）。

4、拖放时突出显示可用的放置位置

要在拖动过程中突出显示可用的目标位置（例如，不能将根节点拖动到另一个根节点下，并且您希望直观地告知用户这一点），请使用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相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！