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

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

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

標(biāo)記完成

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

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

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

拆分任務(wù)

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

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

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;

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

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

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é)束日期不會(huì)更改，并且它不再出現(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)在我們想向您展示如何實(shí)現(xiàn)其他一些功能，例如隱藏任務(wù)或標(biāo)記任務(wù)來進(jìn)行剪切和復(fù)制。

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

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

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

首先，迭代tasksToCopy數(shù)組。在此數(shù)組中，按ID獲取任務(wù)對(duì)象，執(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ù)移動(dòng)到不同的父任務(wù)和新位置。

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

如果復(fù)制或移動(dòng)任務(wù)的任務(wù)成為父任務(wù)，請(qǐng)打開它，然后需要清空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ù)可以移動(dòng)到任何位置，并且甘特圖不會(huì)將它們捕捉到時(shí)間軸單元格。

gantt.config.round_dnd_dates = false;

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

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

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

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

結(jié)論

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