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

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

讓我們更詳細地介紹一下這個演示，并為您提供技術細節，將類似的功能集成到項目中。

初始化和配置上下文菜單

在用例場景中，上下文菜單是一個有用的UI元素，它可以根據用戶與甘特圖交互的上下文顯示不同的選項。

如果您右鍵單擊下面示例中甘特圖的任何任務，可以嘗試所有可用的任務操作。

為了節省時間，我們將省略明確描述甘特圖組件的初始化階段，直接使用DHTMLX Menu實現上下文菜單。

第一步是創建上下文菜單的新實例。

let contextMenu = new dhx.ContextMenu(null, { css: "dhx_widget--bg_gray" });

之后使用onContextMenu事件處理程序，該處理程序在右鍵單擊任務后觸發。

gantt.attachEvent("onContextMenu", function (taskId, linkId, event) {

在菜單配置中，根據單擊位置顯示不同的菜單項。在時間軸中調用常規任務的上下文菜單時，它將包含“拆分任務”項。但是在項目類型任務的上下文菜單中以及在網格區域調用任務菜單時，此選項不可用，因為假設任務應該在單擊位置進行拆分。

在事件處理程序中函數的最開始，有必要收集上下文菜單調用的確切位置的信息。

let itemsConfig = null;
if (taskId) {
const task = gantt.getTask(taskId);

為此，您需要幾個配置(變量)：

• isTaskBar – 顯示時間軸中的任務欄(此處不考慮任務類型)是否被單擊。

const isTaskBar = event.target.closest(".gantt_task_line");

• isParentTask – 顯示任務是否有子任務。

const isParentTask = gantt.hasChild(task.id);

• isSplitTask – 當任務的所有子任務(任務欄)顯示在時間軸的單行上時，顯示任務是否以拆分模式呈現。

const isSplitTask = task.render === "split";

• barHidden – 顯示任務是否顯示在時間軸中。

const barHidden = task.hide_bar;

如果任務有父任務，則需要確定其父任務是否顯示在分裂模式中。它是這樣做的：

let hasSplitParent = false;
if (task.parent) {
const parent = gantt.getTask(task.parent);
hasSplitParent = parent.render === "split";
}

之后，您需要將所有參數添加到itemsConfig對象。

itemsConfig = { isTaskBar, isParentTask, isSplitTask, barHidden, hasSplitParent };

對于自定義上下文菜單，您需要刪除所有以前的上下文菜單項，然后添加由generateMenuItems函數返回的新項。

contextMenu.data.removeAll();
contextMenu.data.parse(generateMenuItems(itemsConfig));

現在是時候在單擊位置顯示上下文菜單了。

contextMenu.showAt(event);

接下來，您需要計算鼠標點擊相對于時間軸的位置。從得到的單擊位置，您將獲得單擊日期，它應該被添加到clickDate參數中，它將用于各種上下文菜單操作。

const clickPosition = gantt.utils.dom.getRelativeEventPosition(event, gantt.$task_data).x;
clickDate = gantt.dateFromPos(clickPosition)

onContextMenu事件處理程序的函數必須返回false以禁用默認的上下文菜單功能(即瀏覽器不應該顯示默認的上下文菜單)。

現在讓我們返回到generateMenuItems函數，在這個函數中，生成上下文菜單項的數據。上下文菜單項的每個對象都包含一個圖標、項類型、ID和文本。

{
icon: "dxi dxi-chevron-up",
type: "menuItem",
id: "add_sibling_above",
value: "Add sibling above",
},

接下來，您需要為“取消復制/剪切操作”和“顯示所有隱藏任務”兩個菜單項創建對象。

const cancelCopyCut = {
icon: "dxi dxi-close",
type: "menuItem",
id: "cancel_paste",
value: "Cancel copy/cut operation",
};
const showAllHidden = {
icon: "dxi dxi-eye",
type: "menuItem",
id: "show_hidden",
value: "Show all hidden tasks",
};

在網格或時間軸上單擊任務欄后，將使用配置調用該函數，并將各種元素添加到上下文菜單中。

當在甘特圖的其他區域發生單擊時，需要檢查是否選擇了用于復制和剪切的任務。如果是，則將此對象添加到菜單項數組中。如果隱藏了某些任務，則會添加第二個菜單項。在上述條件下，無論單擊甘特圖中的位置如何，這些菜單項將始終可見。

const menuItems = [];
if (tasksToCopy.length + tasksToCut.length > 1) {
menuItems.push(cancelCopyCut);
}
if (Object.keys(hiddenTasks).length) {
menuItems.push(showAllHidden);
}
return menuItems;

現在回到上下文菜單配置，在創建上下文菜單的實例之前，考慮使用generateMenuItems函數是合理的，以免以后再回到這個問題上。

您必須為單擊上下文菜單項添加事件處理程序。對于每次單擊，將調用單擊函數，這個函數將使用菜單項的ID。

contextMenu.events.on("click", function (id, e) {
applyCommand(id);
targetId = null;
});

現在我們可以分別關注每個上下文菜單選項的配置。

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