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

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

在上文中（點擊這里回顧>>）為大家介紹了如何完成更改Tree等級、更改任務類型等操作，本文繼續介紹如何完成標記完成、拆分任務等操作，希望對大家有所幫助~

標記完成

有了這個上下文菜單項，最終用戶可以顯示給定的任務已經完成。

在代碼中，任務進度參數的值應該設置為1(即100%)。

case "complete":
task.progress = 1;
gantt.updateTask(task.id);
break;

拆分任務

當您需要將大型任務劃分為幾個更易于管理的部分時，此功能會派上用場。

當點擊此選項時，所選任務似乎在點擊位置被分成2部分。實際上，一個原始任務有兩個副本，您可以在其中更改它們的id和start_date或end_date參數，原始任務變成以拆分模式顯示的項目。

case "split":
gantt.batchUpdate(function () {
if (gantt.hasChild(task.id)) {
gantt.message("The task already has children, so, it won't be split to new sub tasks");
return;
}

const leftChild = gantt.copy(task);
leftChild.id = gantt.uid();
leftChild.end_date = new Date(clickDate);
leftChild.parent = task.id;
leftChild.type = "task";

const rightChild = gantt.copy(task);
rightChild.id = gantt.uid();
rightChild.start_date = new Date(clickDate)
rightChild.parent = task.id;
rightChild.type = "task";

task.render = 'split';
task.type = "project";
gantt.updateTask(task.id);

gantt.close(task.id);

gantt.addTask(leftChild);
gantt.addTask(rightChild);
})
break;

如果一個任務已經被分成兩個部分，那么每個部分也可以被分成兩個部分。在底層下，樹狀結構發生了變化。

要把它帶回來，必須點擊“Unsplit parent”。這里需要調用unsplit函數，它只在“project”類型的任務中調用。此選項僅在網格中可用，但如果任務展開，它將不再顯示在拆分模式中，然后該選項將在時間軸中可用。

case "unsplit":
unsplit(task)
break;

unsplit函數在父任務中也用于相同的目的。

case "unsplit_parent":
const parent = gantt.getTask(task.parent);
unsplit(parent)
break;

該函數刪除任務的所有后代，任務本身接收任務類型。任務的開始和結束日期不會更改，并且它不再出現在拆分模式中。

function unsplit(task) {
gantt.batchUpdate(function () {
gantt.eachTask(function (child) {
if (gantt.isTaskExists(child.id)) {
gantt.deleteTask(child.id);
}
}, task.id)
delete task.render;
task.type = "task";
gantt.updateTask(task.id);
})
}

這就是關于上下文菜單操作的所有內容，現在我們想向您展示如何實現其他一些功能，例如隱藏任務或標記任務來進行剪切和復制。

要隱藏任務，您需要使用onBeforeTaskDisplay事件處理程序。如果返回false，任務將不會顯示在甘特圖中，檢查任務ID是否在hiddenTasks對象中。如果該ID包含任務的真實值，則該任務將被隱藏。

let hiddenTasks = {};
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
return !hiddenTasks[task.id]
});

現在，讓我們繼續研究pasteTasks函數。

首先，迭代tasksToCopy數組。在此數組中，按ID獲取任務對象，執行任務的深度拷貝，更改其ID，并將任務添加到甘特圖。

tasksToCopy.forEach(function (id) {
const task = gantt.getTask(id);
const clone = gantt.copy(task);
clone.id = gantt.uid();
gantt.addTask(clone, parentId, index);
});

之后，迭代taskstock數組。在這里，您應該使用moveTask()方法將任務移動到不同的父任務和新位置。

tasksToCut.forEach(function (id) {
gantt.moveTask(id, index, parentId);
});

如果復制或移動任務的任務成為父任務，請打開它，然后需要清空tasksToCopy和tasksToCut數組。

gantt.open(parentId);

tasksToCopy = [];
tasksToCut = [];

在grid_row_class和task_class模板中，如果任務ID在tasksToCopy數組中，則返回類名task_to_copy，如果任務ID在tasksToCut數組中，則返回task_to_cut。

gantt.templates.grid_row_class =
gantt.templates.task_class = function (start, end, task) {
if (tasksToCopy.indexOf(task.id) > -1) {
return "task_to_copy"
}
if (tasksToCut.indexOf(task.id) > -1) {
return "task_to_cut"
}
return "";
};

這些類有兩種類型的樣式：

1. 不透明度

.task_to_cut.gantt_row,
.task_to_cut.gantt_row.odd,
.task_to_cut.gantt_task_line {
opacity: 0.5;
}

2. 邊界

.task_to_copy.gantt_row,
.task_to_copy.gantt_row.odd,
.task_to_copy.gantt_task_line {
border: 2px dotted LightSkyBlue;
}

此外，禁用round_dnd_dates配置，以便任務可以移動到任何位置，并且甘特圖不會將它們捕捉到時間軸單元格。

gantt.config.round_dnd_dates = false;

劃分任務后，其持續時間可能大于或小于1天。任務移動到新位置后，甘特圖將重新計算任務持續時間，該持續時間將四舍五入到最接近的整數。然后，甘特圖根據任務持續時間重新計算結束日期。

當任務持續時間變為0時，任務會縮小，不方便拖動，因此有必要將duration參數修改為大于0。

gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
task.duration = task.duration || 1
});

事實上，可以用其他單位計算任務持續時間，并以不同的方式顯示此參數(例如，以小數單位)。

結論

如你所見，使用上下文菜單可以顯著增強甘特圖應用程序的功能和用戶體驗。如果您決定在項目管理中使用DHTMLX Gantt，不需要任何第三方工具來實現自定義上下文菜單，HTMLX Suite庫中的Menu小部件是實現此目的的理想工具。