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

在web項(xiàng)目中使用DHTMLX Gantt時(shí)，開發(fā)人員經(jīng)常需要滿足與UI外觀相關(guān)的各種需求。因此他們必須確定JavaScript甘特圖庫的自定義能力，因此本文僅繼續(xù)介紹DHTMLX Gantt的自定義用例。

在這個(gè)系列的文章中，您將學(xué)習(xí)如何使用DHTMLX Gantt組件構(gòu)建類似jira的項(xiàng)目路線圖。在上文中（點(diǎn)擊這里回顧>>）主要介紹了如何實(shí)現(xiàn)工作項(xiàng)的自定義圖標(biāo)，本文將繼續(xù)介紹如何實(shí)現(xiàn)工作項(xiàng)的自定義對話框窗口、自定義網(wǎng)格列等，歡迎持續(xù)關(guān)注！

定制指南

工作項(xiàng)的自定義對話框窗口

在工作項(xiàng)的自定義圖標(biāo)中，可以動(dòng)態(tài)更改顯示的數(shù)值。為此有必要單擊所需的圖標(biāo)，并在打開的對話框窗口中使用三個(gè)按鈕進(jìn)行必要的更改。接下來，我們將向您解釋如何實(shí)現(xiàn)此功能。

您需要使用modalbox()方法來顯示自定義對話框窗口，需要指定一個(gè)類型為“number”的輸入元素，以便更方便地設(shè)置值。此窗口還包括保存和取消更改的按鈕，以及刪除圖標(biāo)值和圖標(biāo)本身的按鈕。

將對話框窗口保存為一個(gè)變量，以便以后能夠訪問它并從HTML元素中獲取值，而無需在屏幕上看到對話框窗口。

let modalbox = gantt.modalbox({
title: "Work Item",
text: `<div><label>Value: <input type='number' min=0 class='items_value' /></label></div>`,
buttons: [
{ label: "Save", css: "items_button", value: "save" },
{ label: "Cancel", css: "items_button", value: "cancel" },
{ label: "Delete", css: "items_button", value: "delete" }
],

對話框窗口出現(xiàn)在屏幕上之后，您應(yīng)該設(shè)置任務(wù)屬性的值。如果給定日期的任務(wù)沒有值，則將其設(shè)置為0。

modalbox.querySelector(".items_value").value = task.items[clickDate] || 0;

 在callback()方法中，有必要指定在自定義圖標(biāo)的對話框窗口中的每個(gè)按鈕被點(diǎn)擊后應(yīng)該發(fā)生什么：

• save – 從HTML元素中獲取值，并為自定義圖標(biāo)日期添加/更新該值；
• delete – 檢查任務(wù)是否有自定義圖標(biāo)日期的值，如果有，刪除該值；
• cancel – 在我們的示例中沒有為這個(gè)按鈕指定邏輯，但是仍然將它包含在代碼中，以便您更容易在這里實(shí)現(xiàn)邏輯。

callback: function (result) {
switch (result) {
case "save":
const newValue = modalbox.querySelector(".items_value").value;
task.items[clickDate] = +newValue;
gantt.updateTask(task.id);
break;

case "cancel":
break;

case "delete":
if (task.items[clickDate]) {
delete task.items[clickDate];
gantt.updateTask(task.id);
}
break;
}
}

自定義網(wǎng)格列

路線圖的網(wǎng)格部分還包括一些應(yīng)該從編程角度解釋的專欄，本文中我們討論的是三列——物品、故事點(diǎn)和狀態(tài)。

我們從“Items” 一欄開始，每個(gè)任務(wù)的工作項(xiàng)總數(shù)可以在相應(yīng)的網(wǎng)格列中找到。由于在列配置中使用了模板函數(shù)，因此可以顯示這些值。應(yīng)該提到的是，“故事點(diǎn)”列中的值是有依賴關(guān)系的，沒有描述點(diǎn)的任務(wù)也應(yīng)該有0個(gè)工作項(xiàng)。

name: "items", label: "Items", align: "center", width: 40, resize: true, template: function (task) {
let total = 0;
if (task.story_points && task.items) {
for (item in task.items) {
total += task.items[item];
}
}
return total;

}

為了簡化故事點(diǎn)的編輯，您需要向相應(yīng)的網(wǎng)格列添加一個(gè)內(nèi)聯(lián)編輯器。

const storyPointsEditor = { type: "number", map_to: "story_points", min: 0 };
...
{
name: "story_points", label: "Story Points", align: "center", width: 40, resize: true, editor: storyPointsEditor, template: function (task) {
return task.story_points || 0;
}
},

路線圖網(wǎng)格中的“Status” 列顯示任務(wù)的進(jìn)度條，可以通過單擊所需的狀態(tài)選項(xiàng)動(dòng)態(tài)更改此參數(shù)，狀態(tài)數(shù)據(jù)存儲(chǔ)在一個(gè)單獨(dú)的數(shù)組中：

gantt.serverList("status", [
{ key: 0, label: "Pending" },
{ key: 1, label: "Ready to Start" },
{ key: 2, label: "In Progress" },
{ key: 3, label: "Done" },
{ key: 4, label: "On Review" },
{ key: 5, label: "Accepted" },
]);

lightbox配置有一個(gè)“select”類型的標(biāo)準(zhǔn)部分(即這種類型的部分在甘特圖中可用），該列表取自數(shù)組gantt.serverList(" status ")。

{
name: "status", height: 22, map_to: "status", type: "select",
options: gantt.serverList("status")
},

要在網(wǎng)格中顯示自定義狀態(tài)值，必須在列配置中使用模板選項(xiàng)。然后添加主HTML元素，所有其他元素都應(yīng)該放在這里，文本狀態(tài)顯示在單元格的頂部。

let statusName = byId(gantt.serverList('status'), task.status);

let html = `<div class="status_column"><div class="status_name">${statusName}</div><div class="status_progress">`

配置任務(wù)時(shí)，需要指定狀態(tài)值（而不是狀態(tài)名）。要匹配狀態(tài)號及其文本，請應(yīng)用自定義byId函數(shù)，它有助于通過狀態(tài)名的編號找到所需的狀態(tài)名。

function byId(list, id) {
for (var i = 0; i < list.length; i++) {
if (list[i].key == id) {
return list[i].label || "";
}
}
return "Pending";
}

每個(gè)任務(wù)狀態(tài)都有一個(gè)序號，彩色方塊的數(shù)量由這個(gè)序號決定。

在編程上，它以以下方式實(shí)現(xiàn)：

• 使用狀態(tài)遍歷數(shù)組中的所有元素，每次添加一個(gè)方形HTML元素。
• 向狀態(tài)框添加CSS樣式，以便在狀態(tài)數(shù)小于或與任務(wù)狀態(tài)數(shù)相同時(shí)為其上色。

const statuses = gantt.serverList('status');
for (var i = 1; i < statuses.length; i++) {
const item = statuses[i];
let filled = "";
if (item.key <= task.status) {
filled = "filled"
}
const el = `<div class="bar ${filled}" data-status=${item.key}></div>`;
html += el;

}

使用onTaskClick事件處理程序使?fàn)顟B(tài)任務(wù)在點(diǎn)擊狀態(tài)列中的方塊后發(fā)生變化：

gantt.attachEvent("onTaskClick", function (id, e) {

在方形元素中，需要從HTML元素中獲取狀態(tài)號并更改任務(wù)對象的狀態(tài)。之后，應(yīng)該更新任務(wù)以呈現(xiàn)更改。最后，您需要返回false，以便在任務(wù)狀態(tài)改變時(shí)不會(huì)觸發(fā)onTaskClick事件。否則，甘特圖將從單擊的行中選擇任務(wù)，而不再選擇前一個(gè)任務(wù)。

const statusBar = e.target.closest(".status_progress .bar");
if (statusBar) {
const task = gantt.getTask(id);
task.status = statusBar.dataset.status;
gantt.updateTask(id);
return false;
}
return true;

更多教程內(nèi)容請下期再見，記得點(diǎn)贊關(guān)注收藏哦！