项目管理软件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 ganttgantt.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;});//organtt.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 branchgantt.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    欢迎进群交流讨论

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

标签：

来源：慧都