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

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

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

定制指南

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

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

您需要使用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" }
],

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

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

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

• save – 從HTML元素中獲取值，并為自定義圖標日期添加/更新該值；
• delete – 檢查任務是否有自定義圖標日期的值，如果有，刪除該值；
• cancel – 在我們的示例中沒有為這個按鈕指定邏輯，但是仍然將它包含在代碼中，以便您更容易在這里實現(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)格部分還包括一些應該從編程角度解釋的專欄，本文中我們討論的是三列——物品、故事點和狀態(tài)。

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

}

為了簡化故事點的編輯，您需要向相應的網(wǎng)格列添加一個內(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” 列顯示任務的進度條，可以通過單擊所需的狀態(tài)選項動態(tài)更改此參數(shù)，狀態(tài)數(shù)據(jù)存儲在一個單獨的數(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配置有一個“select”類型的標準部分(即這種類型的部分在甘特圖中可用），該列表取自數(shù)組gantt.serverList(" status ")。

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

要在網(wǎng)格中顯示自定義狀態(tài)值，必須在列配置中使用模板選項。然后添加主HTML元素，所有其他元素都應該放在這里，文本狀態(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">`

配置任務時，需要指定狀態(tài)值（而不是狀態(tài)名）。要匹配狀態(tài)號及其文本，請應用自定義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";
}

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

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

• 使用狀態(tài)遍歷數(shù)組中的所有元素，每次添加一個方形HTML元素。
• 向狀態(tài)框添加CSS樣式，以便在狀態(tài)數(shù)小于或與任務狀態(tài)數(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事件處理程序使狀態(tài)任務在點擊狀態(tài)列中的方塊后發(fā)生變化：

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

在方形元素中，需要從HTML元素中獲取狀態(tài)號并更改任務對象的狀態(tài)。之后，應該更新任務以呈現(xiàn)更改。最后，您需要返回false，以便在任務狀態(tài)改變時不會觸發(fā)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;

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