DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。

DHTMLX Gantt是一個高度可定制的工具，可以與項目管理應用程序所需的其他功能相補充。在本文中您將學習如何使用自定義上下文菜單來補充基于DHTMLX的JavaScript甘特圖，來提高用戶在任務管理中的效率。考慮到DHTMLX產品的良好互兼容性，DHTMLX Suite的Menu小部件是實現本教程目標的甘特圖組件的完美補充。

在上文中（點擊這里回顧>>）我們為大家介紹了如何完成創建/更新/刪除和復制/粘貼操作，本文繼續介紹如何完成更改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;

篇幅有限未完待續，更多內容敬請期待.......