彩票走势图

项目管理软件dhtmlxGantt配置教程(四):如何实现重新排序

翻译|使用教程|编辑:秦林|2022-10-14 13:45:22.487|阅读 118 次

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

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

相关链接:

dhtmlxgantt入门教程

这篇文章给大家讲解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    欢迎进群交流讨论

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


标签:

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


为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP