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

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

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

標(biāo)記完成

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

在代碼中，任務(wù)進度參數(shù)的值應(yīng)該設(shè)置為1(即100%)。

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

拆分任務(wù)

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

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

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;

如果一個任務(wù)已經(jīng)被分成兩個部分，那么每個部分也可以被分成兩個部分。在底層下，樹狀結(jié)構(gòu)發(fā)生了變化。

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

case "unsplit":
unsplit(task)
break;

unsplit函數(shù)在父任務(wù)中也用于相同的目的。

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

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

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);
})
}

這就是關(guān)于上下文菜單操作的所有內(nèi)容，現(xiàn)在我們想向您展示如何實現(xiàn)其他一些功能，例如隱藏任務(wù)或標(biāo)記任務(wù)來進行剪切和復(fù)制。

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

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

現(xiàn)在，讓我們繼續(xù)研究pasteTasks函數(shù)。

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

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

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

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

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

gantt.open(parentId);

tasksToCopy = [];
tasksToCut = [];

在grid_row_class和task_class模板中，如果任務(wù)ID在tasksToCopy數(shù)組中，則返回類名task_to_copy，如果任務(wù)ID在tasksToCut數(shù)組中，則返回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配置，以便任務(wù)可以移動到任何位置，并且甘特圖不會將它們捕捉到時間軸單元格。

gantt.config.round_dnd_dates = false;

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

當(dāng)任務(wù)持續(xù)時間變?yōu)?時，任務(wù)會縮小，不方便拖動，因此有必要將duration參數(shù)修改為大于0。

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

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

結(jié)論

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