关于javascript:如何在dhtmlxGantt网格中对任务进行排序和重新排序

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

};