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

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

在上文中（點擊這里回顧>>）我們為大家介紹了如何初始化和配置上下文菜單，本文繼續介紹如何完成創建/更新/刪除以及復制/粘貼操作，更多內容請持續關注我們喲~

創建/更新/刪除

首先，我們描述創建/更新/刪除部分，本節包含以下嵌套菜單項：

• 在上面添加sibling

這一項添加了一個同級別的任務，只在被點擊的任務頂部：

case "add_sibling_above":
gantt.createTask({ id: gantt.uid(), text: "New task", start_date: task.start_date, duration: 1 }, task.parent, gantt.getTaskIndex(task.id));
break;

為此，需要將任務的父節點指定為第二個參數，并將分支內任務的索引指定為第三個參數。

• 在下面添加sibling

這個項目添加了一個相同級別的任務，只是在被點擊的任務下面。

case "add_sibling_below":
gantt.createTask({ id: gantt.uid(), text: "New task", start_date: task.start_date, duration: 1 }, task.parent, gantt.getTaskIndex(task.id) + 1);
break;

為此需要將任務的父節點指定為第二個參數，并將分支內任務的索引增加1作為第三個參數。

• 在頂部添加子任務

這個項目在分支的頂部添加一個子任務(在所有其他子任務之上)：

case "add_subtask_top":
gantt.createTask({ id: gantt.uid(), text: "New subtask", start_date: task.start_date, duration: 1 }, task.id, 0);
break;

為此將任務ID指定為第二個參數，并將零索引設置為第三個參數。

• 在底部添加子任務

這個項目在分支的底部添加一個子任務(在所有其他子任務下面)：

case "add_subtask_bottom":
gantt.createTask({ id: gantt.uid(), text: "New subtask", start_date: task.start_date, duration: 1 }, task.id);
break;

為此，應該將任務ID指定為第二個參數，并省略第三個參數。以同樣的方式，使用甘特圖網格區域中的內置“+”按鈕添加任務。

• 編輯任務

此項目打開任務的lightbox(編輯表單)。

case "edit":
gantt.showLightbox(task.id);
break;

• 刪除任務

此項目將在刪除任務時打開確認消息框。

case "delete":
gantt.confirm({
text: "Delete task?",
ok: "Yes",
cancel: "No",
callback: function (result) {
if (result && gantt.isTaskExists(task.id)) {
gantt.deleteTask(task.id);
}
}
});
break;

如果用戶對消息框中的問題是肯定的，則刪除該任務。

復制/粘貼

使用上下文菜單的這一部分，最終用戶可以對任務執行剪切、復制和粘貼操作。

• 剪切

在這里，任務被標記為剪切，以便稍后可以將其移動到其他位置。由于最終用戶可能決定不復制任務，而是刪除任務，因此有必要檢查tasksToCopy數組中是否存在與任務相關的ID。如果帶有任務的ID在數組中，則應該將其從數組中刪除。

接下來，檢查任務ID是否不在tasksToCut數組中，來排除重復的ID。如果具有該ID的任務不在數組中，則將其添加到數組中。之后，您可以使用樣式刷新任務來突出顯示它。

case "cut":
const copyIndex = tasksToCopy.indexOf(task.id) > -1;
if (copyIndex) {
tasksToCopy.splice(copyIndex, 1)
}
// exclude duplicates
if (tasksToCut.indexOf(task.id) === -1) {
tasksToCut.push(task.id);
}
gantt.refreshTask(task.id);
break;

• 復制

在這里，任務被標記為復制，以便稍后可以將其添加到其他位置。由于最終用戶可能決定不切剪切任務，而是復制任務，因此需要檢查任務ID是否在tasksToCut數組中。如果是，則將其從數組中移除。接下來，檢查taskToCopy數組中是否缺少任務ID，以排除重復的ID。如果任務ID不在數組中，則將其添加到數組中。之后，重新繪制任務來使用樣式突出顯示它。

case "copy":
const cutIndex = tasksToCut.indexOf(task.id) > -1;
if (cutIndex) {
tasksToCut.splice(cutIndex, 1)
}
// exclude duplicates
if (tasksToCopy.indexOf(task.id) === -1) {
tasksToCopy.push(task.id);
}
gantt.refreshTask(task.id);
break;

• 粘貼sibling

這里執行了pasteTasks函數，它復制并移動被標記的任務到調用上下文菜單的任務下面。

case "paste_sibling":
pasteTasks(task.parent, gantt.getTaskIndex(task.id) + 1);
break;

• 粘貼child

與前面的選項一樣，這里執行了pasteTasks函數，它將在調用上下文菜單的任務中復制和移動標記的任務。

case "paste_child":
pasteTasks(task.id);
break;

• 取消復制/剪切操作

在這里，復制和剪切標記從任務中刪除。

case "cancel_paste":
tasksToCopy = [];
tasksToCut = [];
gantt.render();
break;

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