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

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

在上文中（點(diǎn)擊這里回顧>>）我們?yōu)榇蠹医榻B了如何初始化和配置上下文菜單，本文繼續(xù)介紹如何完成創(chuàng)建/更新/刪除以及復(fù)制/粘貼操作，更多內(nèi)容請(qǐng)持續(xù)關(guān)注我們喲~

創(chuàng)建/更新/刪除

首先，我們描述創(chuàng)建/更新/刪除部分，本節(jié)包含以下嵌套菜單項(xiàng)：

• 在上面添加sibling

這一項(xiàng)添加了一個(gè)同級(jí)別的任務(wù)，只在被點(diǎn)擊的任務(wù)頂部：

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;

為此，需要將任務(wù)的父節(jié)點(diǎn)指定為第二個(gè)參數(shù)，并將分支內(nèi)任務(wù)的索引指定為第三個(gè)參數(shù)。

• 在下面添加sibling

這個(gè)項(xiàng)目添加了一個(gè)相同級(jí)別的任務(wù)，只是在被點(diǎn)擊的任務(wù)下面。

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;

為此需要將任務(wù)的父節(jié)點(diǎn)指定為第二個(gè)參數(shù)，并將分支內(nèi)任務(wù)的索引增加1作為第三個(gè)參數(shù)。

• 在頂部添加子任務(wù)

這個(gè)項(xiàng)目在分支的頂部添加一個(gè)子任務(wù)(在所有其他子任務(wù)之上)：

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

為此將任務(wù)ID指定為第二個(gè)參數(shù)，并將零索引設(shè)置為第三個(gè)參數(shù)。

• 在底部添加子任務(wù)

這個(gè)項(xiàng)目在分支的底部添加一個(gè)子任務(wù)(在所有其他子任務(wù)下面)：

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

為此，應(yīng)該將任務(wù)ID指定為第二個(gè)參數(shù)，并省略第三個(gè)參數(shù)。以同樣的方式，使用甘特圖網(wǎng)格區(qū)域中的內(nèi)置“+”按鈕添加任務(wù)。

• 編輯任務(wù)

此項(xiàng)目打開(kāi)任務(wù)的lightbox(編輯表單)。

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

• 刪除任務(wù)

此項(xiàng)目將在刪除任務(wù)時(shí)打開(kāi)確認(rèn)消息框。

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;

如果用戶對(duì)消息框中的問(wèn)題是肯定的，則刪除該任務(wù)。

復(fù)制/粘貼

使用上下文菜單的這一部分，最終用戶可以對(duì)任務(wù)執(zhí)行剪切、復(fù)制和粘貼操作。

• 剪切

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

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

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;

• 復(fù)制

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

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

這里執(zhí)行了pasteTasks函數(shù)，它復(fù)制并移動(dòng)被標(biāo)記的任務(wù)到調(diào)用上下文菜單的任務(wù)下面。

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

• 粘貼child

與前面的選項(xiàng)一樣，這里執(zhí)行了pasteTasks函數(shù)，它將在調(diào)用上下文菜單的任務(wù)中復(fù)制和移動(dòng)標(biāo)記的任務(wù)。

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

• 取消復(fù)制/剪切操作

在這里，復(fù)制和剪切標(biāo)記從任務(wù)中刪除。

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

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