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ǔ)充。

讓我們更詳細(xì)地介紹一下這個(gè)演示，并為您提供技術(shù)細(xì)節(jié)，將類似的功能集成到項(xiàng)目中。

初始化和配置上下文菜單

在用例場(chǎng)景中，上下文菜單是一個(gè)有用的UI元素，它可以根據(jù)用戶與甘特圖交互的上下文顯示不同的選項(xiàng)。

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

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

第一步是創(chuàng)建上下文菜單的新實(shí)例。

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

之后使用onContextMenu事件處理程序，該處理程序在右鍵單擊任務(wù)后觸發(fā)。

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

在菜單配置中，根據(jù)單擊位置顯示不同的菜單項(xiàng)。在時(shí)間軸中調(diào)用常規(guī)任務(wù)的上下文菜單時(shí)，它將包含“拆分任務(wù)”項(xiàng)。但是在項(xiàng)目類型任務(wù)的上下文菜單中以及在網(wǎng)格區(qū)域調(diào)用任務(wù)菜單時(shí)，此選項(xiàng)不可用，因?yàn)榧僭O(shè)任務(wù)應(yīng)該在單擊位置進(jìn)行拆分。

在事件處理程序中函數(shù)的最開(kāi)始，有必要收集上下文菜單調(diào)用的確切位置的信息。

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

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

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

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

• isParentTask – 顯示任務(wù)是否有子任務(wù)。

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

• isSplitTask – 當(dāng)任務(wù)的所有子任務(wù)(任務(wù)欄)顯示在時(shí)間軸的單行上時(shí)，顯示任務(wù)是否以拆分模式呈現(xiàn)。

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

• barHidden – 顯示任務(wù)是否顯示在時(shí)間軸中。

const barHidden = task.hide_bar;

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

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

之后，您需要將所有參數(shù)添加到itemsConfig對(duì)象。

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

對(duì)于自定義上下文菜單，您需要?jiǎng)h除所有以前的上下文菜單項(xiàng)，然后添加由generateMenuItems函數(shù)返回的新項(xiàng)。

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

現(xiàn)在是時(shí)候在單擊位置顯示上下文菜單了。

contextMenu.showAt(event);

接下來(lái)，您需要計(jì)算鼠標(biāo)點(diǎn)擊相對(duì)于時(shí)間軸的位置。從得到的單擊位置，您將獲得單擊日期，它應(yīng)該被添加到clickDate參數(shù)中，它將用于各種上下文菜單操作。

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

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

現(xiàn)在讓我們返回到generateMenuItems函數(shù)，在這個(gè)函數(shù)中，生成上下文菜單項(xiàng)的數(shù)據(jù)。上下文菜單項(xiàng)的每個(gè)對(duì)象都包含一個(gè)圖標(biāo)、項(xiàng)類型、ID和文本。

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

接下來(lái)，您需要為“取消復(fù)制/剪切操作”和“顯示所有隱藏任務(wù)”兩個(gè)菜單項(xiàng)創(chuàng)建對(duì)象。

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",
};

在網(wǎng)格或時(shí)間軸上單擊任務(wù)欄后，將使用配置調(diào)用該函數(shù)，并將各種元素添加到上下文菜單中。

當(dāng)在甘特圖的其他區(qū)域發(fā)生單擊時(shí)，需要檢查是否選擇了用于復(fù)制和剪切的任務(wù)。如果是，則將此對(duì)象添加到菜單項(xiàng)數(shù)組中。如果隱藏了某些任務(wù)，則會(huì)添加第二個(gè)菜單項(xiàng)。在上述條件下，無(wú)論單擊甘特圖中的位置如何，這些菜單項(xiàng)將始終可見(jiàn)。

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

現(xiàn)在回到上下文菜單配置，在創(chuàng)建上下文菜單的實(shí)例之前，考慮使用generateMenuItems函數(shù)是合理的，以免以后再回到這個(gè)問(wèn)題上。

您必須為單擊上下文菜單項(xiàng)添加事件處理程序。對(duì)于每次單擊，將調(diào)用單擊函數(shù)，這個(gè)函數(shù)將使用菜單項(xiàng)的ID。

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

現(xiàn)在我們可以分別關(guān)注每個(gè)上下文菜單選項(xiàng)的配置。

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