「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。
DHTMLX Gantt是一个高度可定制的工具，可以与项目管理应用程序所需的其他功能相补充。在本文中您将学习如何使用自定义上下文菜单来补充基于DHTMLX的JavaScript甘特图，来提高用户在任务管理中的效率。考虑到DHTMLX产品的良好互兼容性，DHTMLX Suite的Menu小部件是实现本教程目标的甘特图组件的完美补充。
DHTMLX Gantt最新正式版下载
在上文中（点击这里回顾>>）我们为大家介绍了如何完成创建/更新/删除和复制/粘贴操作，本文继续介绍如何完成更改Tree的等级、更改任务类型等操作，更多内容请持续关注我们哟~
更改Tree的等级
本节有助于组织项目中的层次结构，您可以通过以下方式向项目添加层次结构：
- 选择任务并缩进，使其成为子任务，上述任务变为项目任务：
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;更改任务类型
在上下文菜单的这一部分中，您可以为所选任务指定任务类型。
- 常规任务
在这里设置“任务”类型，与前面一样，它可能是一个持续时间为零的里程碑，您应该设置任务持续时间并更新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;更改可见性
此上下文菜单项侧重于管理任务和相关元素的可见性，并包括以下选项：
- 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;篇幅有限未完待续，更多内容敬请期待.......