彩票走势图

甘特图dhtmlxGantt使用教程:如何在JavaScript甘特图的网格中对任务进行排序和重新排序

翻译|使用教程|编辑:莫成敏|2020-05-20 13:35:16.623|阅读 990 次

概述:在管理项目时,用户可能需要更改任务顺序或在多个甘特项目之间移动任务。今天,我们将熟悉在dhtmlxGantt中实现此功能的方式。

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

相关链接:

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

点击下载dhtmlxGantt正式版

在管理项目时,用户可能需要更改任务顺序或在多个甘特项目之间移动任务。今天,我们将熟悉在dhtmlxGantt中实现此功能的方式。


我们的HTML5 Gantt提供了两种在网格中对任务进行重新排序的替代方法:

  • 通过拖放
  • 通过分类

默认情况下,两种模式均禁用。

为了通过拖放操作使任务重新排序,我们需要将order_branch选项设置为'true':

// ordering tasks only inside a branch
gantt.config.order_branch = true;

gantt.init("gantt_here");

order_branch属性激活“分支”模式,该模式可对同一嵌套级别内的任务的重新排序。


更改任务位置涉及触发onBeforeTaskMoveonAfterTaskMove事件。第一个可以用来控制任务可以移到哪里。为了防止移动到另一个子分支,请使用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";

在此模式下,仅将任务名称重新排序(按住鼠标左键),并且仅当任务放在目标位置时(松开键)才重新渲染甘特图:


与默认模式不同,更改任务位置不涉及触发onBeforeTaskMoveonAfterTaskMove事件。为防止任务掉到特定位置,我们可以改用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天免费评估版

dhtmlxGantt可以集成到APS系统中,助力生产排程工作!还可以进行慧都资源调度系统定制,帮助企业完善资源管理,简化资源计划,实现利润增加!


想要购买dhtmlxGantt正版授权,或了解更多产品信息请点击



标签:

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

文章转载自:

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP