DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表?？蓾M足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。

DHTMLX Gantt是一個(gè)高度可定制的工具，可以與項(xiàng)目管理應(yīng)用程序所需的其他功能相補(bǔ)充。在本文中您將學(xué)習(xí)如何使用自定義上下文菜單來(lái)補(bǔ)充基于DHTMLX的JavaScript甘特圖，來(lái)提高用戶(hù)在任務(wù)管理中的效率?？紤]到DHTMLX產(chǎn)品的良好互兼容性，DHTMLX Suite的Menu小部件是實(shí)現(xiàn)本教程目標(biāo)的甘特圖組件的完美補(bǔ)充。

在上文中（點(diǎn)擊這里回顧>>）我們?yōu)榇蠹医榻B了如何完成創(chuàng)建/更新/刪除和復(fù)制/粘貼操作，本文繼續(xù)介紹如何完成更改Tree的等級(jí)、更改任務(wù)類(lèi)型等操作，更多內(nèi)容請(qǐng)持續(xù)關(guān)注我們喲~

更改Tree的等級(jí)

本節(jié)有助于組織項(xiàng)目中的層次結(jié)構(gòu)，您可以通過(guò)以下方式向項(xiàng)目添加層次結(jié)構(gòu)：

• 選擇任務(wù)并縮進(jìn)，使其成為子任務(wù)，上述任務(wù)變?yōu)轫?xiàng)目任務(wù)：

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;

• 反之亦然——擴(kuò)展一個(gè)任務(wù)，使它不再是前一個(gè)父任務(wù)的子任務(wù)：

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;

更改任務(wù)類(lèi)型

在上下文菜單的這一部分中，您可以為所選任務(wù)指定任務(wù)類(lèi)型。

• 常規(guī)任務(wù)

在這里設(shè)置“任務(wù)”類(lèi)型，與前面一樣，它可能是一個(gè)持續(xù)時(shí)間為零的里程碑，您應(yīng)該設(shè)置任務(wù)持續(xù)時(shí)間并更新end_date參數(shù)，然后更新任務(wù)。

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

• 項(xiàng)目任務(wù)

您可以為任務(wù)設(shè)置“項(xiàng)目”類(lèi)型并更新它。

case "type_project":
task.type = "project";
gantt.updateTask(task.id);
break;

• 里程碑任務(wù)

您可以為任務(wù)設(shè)置“milestone”類(lèi)型并更新它。

case "type_milestone":
task.type = "milestone";
gantt.updateTask(task.id);
break;

更改可見(jiàn)性

此上下文菜單項(xiàng)側(cè)重于管理任務(wù)和相關(guān)元素的可見(jiàn)性，并包括以下選項(xiàng)：

• Rollup（匯總）

我們從任務(wù)的rollup參數(shù)開(kāi)始，項(xiàng)目欄上顯示了卷起的元素，并提供了項(xiàng)目進(jìn)度的快速概述。首先更改rollup參數(shù)，以便任務(wù)顯示在項(xiàng)目欄上，更新任務(wù)及其父任務(wù)來(lái)呈現(xiàn)更改。

case "rollup":
task.rollup = !task.rollup;
gantt.updateTask(task.id);
gantt.updateTask(task.parent);
break;

• 隱藏任務(wù)欄

對(duì)于此選項(xiàng)，您需要更改任務(wù)的hide_bar參數(shù)，來(lái)在時(shí)間軸中隱藏任務(wù)，更新任務(wù)來(lái)呈現(xiàn)更改。

case "hide_bar":
task.hide_bar = !task.hide_bar;
gantt.updateTask(task.id);
break;

• 隱藏任務(wù)行

向hiddenTasks對(duì)象添加任務(wù)來(lái)隱藏整個(gè)任務(wù)行，然后更新任務(wù)來(lái)呈現(xiàn)更改，任務(wù)將不會(huì)顯示在網(wǎng)格和時(shí)間軸中。

case "hide_row":
hiddenTasks[task.id] = true;
gantt.updateTask(task.id);
break;

• 顯示所有隱藏任務(wù)

清空hiddenTasks對(duì)象來(lái)顯示所有先前隱藏的任務(wù)，然后執(zhí)行render命令來(lái)呈現(xiàn)更改。

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

篇幅有限未完待續(xù)，更多內(nèi)容敬請(qǐng)期待.......