DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。在web项目中使用DHTMLX Gantt时开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力因此本文仅继续介绍DHTMLX Gantt的自定义用例。在这个系列的文章中您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。在上文中主要介绍了如何实现工作项的自定义图标本文将继续介绍如何实现工作项的自定义对话框窗口、自定义网格列等欢迎持续关注定制指南工作项的自定义对话框窗口在工作项的自定义图标中可以动态更改显示的数值。为此有必要单击所需的图标并在打开的对话框窗口中使用三个按钮进行必要的更改。接下来我们将向您解释如何实现此功能。您需要使用modalbox()方法来显示自定义对话框窗口需要指定一个类型为“number”的输入元素以便更方便地设置值。此窗口还包括保存和取消更改的按钮以及删除图标值和图标本身的按钮。将对话框窗口保存为一个变量以便以后能够访问它并从HTML元素中获取值而无需在屏幕上看到对话框窗口。let modalbox gantt.modalbox({ title: Work Item, text: divlabelValue: input typenumber min0 classitems_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 classstatus_columndiv classstatus_name${statusName}/divdiv classstatus_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 classbar ${filled}>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;更多教程内容请下期再见记得点赞关注收藏哦