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

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

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

DHTMLX Gantt v8.0正式版下载

在这个系列的文章中，您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。在上文中（点击这里回顾>>）主要介绍了项目路线图的用例、时间刻度和Today标记定制等，本文将继续讲解如何实现定制，持续关注我们哦~

定制指南

工作项的自定义图标

在路线图时间线中显示的工作项自定义图标可能是这个场景中最奇怪的元素，我们在之前的文章中解释了它们的含义，现在想揭开这些图标是如何实现的。

在实践中，这些方形图标被添加到时间轴区域的任务中，并使用addTaskLayer方法添加了一个带有自定义元素的附加层。为了确保这些元素在重新初始化后不会消失，您需要在ongantready事件处理程序中添加代码。

javascript 复制代码

gantt.attachEvent("onGanttReady", function () {
gantt.addTaskLayer(function (task) {

addTaskLayer方法适用于所有项目任务，因此您应该首先检查特定任务属性(项)中是否存在已保存的值。

javascript 复制代码

if (task.items) {

对于这样保存的值，您必须为任务创建附加层的主元素。该元素将在函数结束时返回，并且工作项的自定义图标将被添加到其中。

javascript 复制代码

const mainEl = document.createElement('div');

之后，需要遍历task.items中的所有值:

javascript 复制代码

for (timestamp in task.items) {

下一步是获取unix时间戳值并将其转换为日期，结果值应该存储在一个单独的变量中。

javascript 复制代码

const itemDate = new Date(+timestamp);
const value = task.items[timestamp];

使用getTaskPosition方法来指定任务对象和应该显示自定义图标的日期，需要确定图标方块在时间轴上的坐标。

javascript 复制代码

const sizes = gantt.getTaskPosition(task, itemDate, itemDate);

然后需要创建一个HTML元素，在其中指定一个特定的类名和一个值(数字)，并添加一个带有任务ID的属性。

javascript 复制代码

const el = document.createElement('div');
el.className = 'work_item';
el.innerHTML = value;
el.setAttribute("data-taskId", task.id);

自定义图标必须显示在单元格的中心，默认情况下，元素宽度为15px。

javascript 复制代码

let elWidth = 15;

因此，如果时间轴单元格宽度的一半小于自定义元素的宽度，则该元素将自动缩小。

javascript 复制代码

let cellWidth = gantt.getScale().col_width;

if (elWidth > cellWidth / 2) {
elWidth = cellWidth / 2
}

考虑到元素的宽度和时间轴单元格的宽度，计算将元素放置在单元格中心所需的左边距的数量：

javascript 复制代码

let marginLeft = (cellWidth - elWidth) / 2;

元素的位置(坐标)是用styles指定的：

javascript 复制代码

el.style.left = sizes.left + 'px';
el.style.top = sizes.top + 'px';
el.style.marginLeft = marginLeft + 'px';
el.style.width = elWidth + "px"

工作项的自定义图标默认颜色是灰色的，此选项在未为任务指定其他颜色时使用。如果图标的日期不包括在任务的日期范围内，它将以红色突出显示。

javascript 复制代码

let background = "Gray";
if (+itemDate < +task.start_date || +itemDate > +task.end_date) {
background = "DarkRed";
}

如果自定义图标放置在时间轴上的任务日期内，则其颜色必须取自此任务的父任务。在单个任务和父任务中，自定义图标将具有这些任务的颜色。

javascript 复制代码

else {
if (task.parent) {
const parent = gantt.getTask(task.parent);
background = parent.color || background;
}
else {
background = task.color || background;
}
}

之后使用样式设置图标的颜色，并将其附加到任务附加图层的主要元素上：

javascript 复制代码

el.style.background = background;
el.style.color = "#eee"

mainEl.appendChild(el);

为了使自定义图标看起来与任务栏有所不同，我们添加了一个样式规则，使颜色更饱和：

javascript 复制代码

filter: saturate(180%);

这样无论文本的颜色是白色、黑色还是灰色，它都不会影响文本的颜色。

然后，您必须为onEmptyClick事件添加一个事件处理程序。当单击任何时间轴单元格以及没有与任务(如任务栏和任务行)相关联的元素的路线图界面的任何点时，将调用此事件。

javascript 复制代码

gantt.attachEvent("onEmptyClick", function (e) {

首先，尝试使用close()方法获取任务行或自定义图标元素：

javascript 复制代码

const taskRow = e.target.closest(".gantt_task_row");
const customElement = e.target.closest(".work_item");

相对于时间轴的点击位置被保存到一个变量中。

javascript 复制代码

const position = gantt.utils.dom.getRelativeEventPosition(e, gantt.$task_data).x

单击任务行或自定义图标后，您将从HTML元素获得任务ID，然后使用getTask()方法获得任务本身。

javascript 复制代码

const taskId = targetElement.dataset.taskId || targetElement.dataset.taskid;
const task = gantt.getTask(taskId);

之后，需要使用dateFromPos()方法获取点击位置的时间轴日期。日期带有时间参数，因此使用gantt.date.day_start()方法将时间四舍五入到一天的开始会更方便。这一步使得在addTaskLayer()方法中迭代日期元素变得更加容易。

javascript 复制代码

const clickDate = +gantt.date.day_start(gantt.dateFromPos(position));

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