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

在web項目中使用DHTMLX Gantt時，開發人員經常需要滿足與UI外觀相關的各種需求。因此他們必須確定JavaScript甘特圖庫的自定義能力，因此本文僅繼續介紹DHTMLX Gantt的自定義用例。

在這個系列的文章中，您將學習如何使用DHTMLX Gantt組件構建類似jira的項目路線圖。在上文中（點擊這里回顧>>）主要介紹了如何實現工作項的自定義圖標，本文將繼續介紹如何實現工作項的自定義對話框窗口、自定義網格列等，歡迎持續關注！

定制指南

工作項的自定義對話框窗口

在工作項的自定義圖標中，可以動態更改顯示的數值。為此有必要單擊所需的圖標，并在打開的對話框窗口中使用三個按鈕進行必要的更改。接下來，我們將向您解釋如何實現此功能。

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

將對話框窗口保存為一個變量，以便以后能夠訪問它并從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" }
],

對話框窗口出現在屏幕上之后，您應該設置任務屬性的值。如果給定日期的任務沒有值，則將其設置為0。

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

在callback()方法中，有必要指定在自定義圖標的對話框窗口中的每個按鈕被點擊后應該發生什么：

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

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

自定義網格列

路線圖的網格部分還包括一些應該從編程角度解釋的專欄，本文中我們討論的是三列——物品、故事點和狀態。

我們從“Items” 一欄開始，每個任務的工作項總數可以在相應的網格列中找到。由于在列配置中使用了模板函數，因此可以顯示這些值。應該提到的是，“故事點”列中的值是有依賴關系的，沒有描述點的任務也應該有0個工作項。

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;

}

為了簡化故事點的編輯，您需要向相應的網格列添加一個內聯編輯器。

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

路線圖網格中的“Status” 列顯示任務的進度條，可以通過單擊所需的狀態選項動態更改此參數，狀態數據存儲在一個單獨的數組中：

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配置有一個“select”類型的標準部分(即這種類型的部分在甘特圖中可用），該列表取自數組gantt.serverList(" status ")。

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

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

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

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

配置任務時，需要指定狀態值（而不是狀態名）。要匹配狀態號及其文本，請應用自定義byId函數，它有助于通過狀態名的編號找到所需的狀態名。

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

每個任務狀態都有一個序號，彩色方塊的數量由這個序號決定。

在編程上，它以以下方式實現：

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

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事件處理程序使狀態任務在點擊狀態列中的方塊后發生變化：

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

在方形元素中，需要從HTML元素中獲取狀態號并更改任務對象的狀態。之后，應該更新任務以呈現更改。最后，您需要返回false，以便在任務狀態改變時不會觸發onTaskClick事件。否則，甘特圖將從單擊的行中選擇任務，而不再選擇前一個任務。

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;

更多教程內容請下期再見，記得點贊關注收藏哦！