彩票走势图

dhtmlxGantt使用教程:如何重新排序任务

翻译|使用教程|编辑:杨鹏连|2021-02-19 09:44:08.450|阅读 541 次

概述:在本文中,您将学习如何在dhtmlxGantt网格中对任务进行排序和重新排序。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt,你可以显示活动之间的依赖关系,显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载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 "";
};

关产品推荐:

VARCHART XGantt支持ActiveX、.Net等平台的C#甘特图控件

AnyGantt构建复杂且内容丰富的甘特图的理想工具

jQuery Gantt Package基于HTML5 / jQuery的跨平台jQuery Gantt包

phGantt Time Package对任务和时间的分配管理的甘特图

APS帮助提升企业生产效率,真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率

想要购买dhtmlxGantt正版授权,或了解慧都APS系统请点击

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP