「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图（三）

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。

在web项目中使用DHTMLX Gantt时，开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力，因此本文仅继续介绍DHTMLX Gantt的自定义用例。

DHTMLX Gantt v8.0正式版下载

在这个系列的文章中，您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。在上文中（点击这里回顾>>）主要介绍了如何实现工作项的自定义图标，本文将继续介绍如何实现工作项的自定义对话框窗口、自定义网格列等，欢迎持续关注！

定制指南

工作项的自定义对话框窗口

在工作项的自定义图标中，可以动态更改显示的数值。为此有必要单击所需的图标，并在打开的对话框窗口中使用三个按钮进行必要的更改。接下来，我们将向您解释如何实现此功能。

您需要使用modalbox()方法来显示自定义对话框窗口，需要指定一个类型为“number”的输入元素，以便更方便地设置值。此窗口还包括保存和取消更改的按钮，以及删除图标值和图标本身的按钮。

将对话框窗口保存为一个变量，以便以后能够访问它并从HTML元素中获取值，而无需在屏幕上看到对话框窗口。

let modalbox = gantt.modalbox({
title: "Work Item",
text: `
Value: 
`,
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 = `
${statusName}
`

配置任务时，需要指定状态值（而不是状态名）。要匹配状态号及其文本，请应用自定义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 = `
`;
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;

更多教程内容请下期再见，记得点赞关注收藏哦！