首页 前端知识 「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中(三)

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中(三)

2024-07-22 00:07:37 前端知识 前端哥 471 996 我要收藏

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。

DHTMLX Gantt是一个高度可定制的工具,可以与项目管理应用程序所需的其他功能相补充。在本文中您将学习如何使用自定义上下文菜单来补充基于DHTMLX的JavaScript甘特图,来提高用户在任务管理中的效率。考虑到DHTMLX产品的良好互兼容性,DHTMLX Suite的Menu小部件是实现本教程目标的甘特图组件的完美补充。

DHTMLX Gantt最新正式版下载

在上文中(点击这里回顾>>)我们为大家介绍了如何完成创建/更新/删除和复制/粘贴操作,本文继续介绍如何完成更改Tree的等级、更改任务类型等操作,更多内容请持续关注我们哟~

更改Tree的等级

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中

本节有助于组织项目中的层次结构,您可以通过以下方式向项目添加层次结构:

  • 选择任务并缩进,使其成为子任务,上述任务变为项目任务:
case "indent":
const prevId = gantt.getPrevSibling(task.id);
if (prevId) {
const newParent = gantt.getTask(prevId);
gantt.moveTask(task.id, gantt.getChildren(newParent.id).length, newParent.id);
newParent.type = gantt.config.types.project;
newParent.$open = true;
gantt.updateTask(task.id);
gantt.updateTask(newParent.id);
return task.id;
}
break;
  • 反之亦然——扩展一个任务,使它不再是前一个父任务的子任务:
case "outdent":
const oldParent = task.parent;
if (gantt.isTaskExists(oldParent) && oldParent != gantt.config.root_id) {
var index = gantt.getTaskIndex(oldParent) + 1;

gantt.moveTask(task.id, index, gantt.getParent(task.parent));
if (!gantt.hasChild(oldParent)) {
gantt.getTask(oldParent).type = gantt.config.types.task;
}
gantt.updateTask(task.id);
gantt.updateTask(oldParent);
return task.id;
}
break;
更改任务类型

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中

在上下文菜单的这一部分中,您可以为所选任务指定任务类型。

  • 常规任务

在这里设置“任务”类型,与前面一样,它可能是一个持续时间为零的里程碑,您应该设置任务持续时间并更新end_date参数,然后更新任务。

case "type_task":
task.type = "task";
task.duration = task.duration || 1;
task.end_date = gantt.calculateEndDate(task);
gantt.updateTask(task.id);
break;
  • 项目任务

您可以为任务设置“项目”类型并更新它。

case "type_project":
task.type = "project";
gantt.updateTask(task.id);
break;
  • 里程碑任务

您可以为任务设置“milestone”类型并更新它。

case "type_milestone":
task.type = "milestone";
gantt.updateTask(task.id);
break;
更改可见性

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中

此上下文菜单项侧重于管理任务和相关元素的可见性,并包括以下选项:

  • Rollup(汇总)

我们从任务的rollup参数开始,项目栏上显示了卷起的元素,并提供了项目进度的快速概述。首先更改rollup参数,以便任务显示在项目栏上,更新任务及其父任务来呈现更改。

case "rollup":
task.rollup = !task.rollup;
gantt.updateTask(task.id);
gantt.updateTask(task.parent);
break;
  • 隐藏任务栏

对于此选项,您需要更改任务的hide_bar参数,来在时间轴中隐藏任务,更新任务来呈现更改。

case "hide_bar":
task.hide_bar = !task.hide_bar;
gantt.updateTask(task.id);
break;
  • 隐藏任务行

向hiddenTasks对象添加任务来隐藏整个任务行,然后更新任务来呈现更改,任务将不会显示在网格和时间轴中。

case "hide_row":
hiddenTasks[task.id] = true;
gantt.updateTask(task.id);
break;
  • 显示所有隐藏任务

清空hiddenTasks对象来显示所有先前隐藏的任务,然后执行render命令来呈现更改。

case "show_hidden":
hiddenTasks = {};
gantt.render();
break;

篇幅有限未完待续,更多内容敬请期待.......

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14172.html
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!