「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图(四)

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

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

DHTMLX Gantt v8.0正式版下载

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

定制指南
自定义时间线调整器

路线图顶部还有一个双面调整器,可用于更改显示的日期范围,路线图包括任务的日期范围和显示的日期范围。它们不是一回事,任务日期的范围取决于已加载的任务,并根据任务日期进行更改。缺省情况下,不指定显示的日期范围,取决于任务日期。但是如果您设置了日期范围,它将保持不变,直到您更改它。

现在我们应该介绍关于调整器中日期范围的HTML元素结构,在后台,有一个元素用于显示任务日期的总范围。在前台,你可以看到两个圆的元素作为resizers。在这两个元素之间,我们使用了另一个元素,它突出显示相对于任务日期范围的显示日期范围。

<div class="range_resizer" title="Change the displayed date range">
<div class="total_range">
<div class="range_indicator"></div>
<div class="left_resizer"></div>
<div class="right_resizer"></div>
</div>
</div>

为了使这些元素易于管理,您必须向窗口对象添加事件处理程序。单击鼠标按钮后,事件处理程序将检查鼠标是否位于左侧或右侧调整大小器上。如果是,则resizeElement元素保存在resizeElement变量中。

window.addEventListener('mousedown', function (e) {
const element = e.target.closest(".left_resizer") || e.target.closest(".right_resizer")
if (element) {
resizeElement = element;
}
});

在释放鼠标按钮之后,必须重置变量,以便在移动鼠标指针时不会改变任何其他内容。

window.addEventListener('mouseup', function (e) {
resizeElement = false;
});

如果resizer元素存储在变量中,则主要操作发生在mousemove事件中。首先,您需要添加两个常量来指定resizer元素的一半宽度(resizerWidth)和左/右缩进(margin)。

window.addEventListener('mousemove', function (e) {
if (resizeElement) {
const resizerWidth = 8;
const margin = 10;

然后将调整器宽度的一半添加到具有新元素位置的变量中,因此当鼠标移动时,元素将被放置在中间(而不是右边)。

let newPosition = e.pageX - resizerWidth;

之后,您将收到两个调整器的HTML元素、任务的日期范围以及它们的坐标。

const totalRange = document.querySelector(".total_range");
const leftResizer = document.querySelector(".left_resizer");
const rightResizer = document.querySelector(".right_resizer");

const totalRect = totalRange.getBoundingClientRect();
const leftRect = leftResizer.getBoundingClientRect();
const rightRect = rightResizer.getBoundingClientRect();

然后,您必须根据坐标和调整器的类型(左或右)修改新调整器的位置。调整大小器不应该扩展到日期范围元素之外,并且应该正确地放置在彼此之间。

if (resizeElement.className == "left_resizer") {
if (newPosition < totalRect.x) {
newPosition = totalRect.x
}
if (newPosition + resizerWidth >= rightRect.x) {
newPosition = rightRect.x - resizerWidth;
}
}
else {
if (newPosition > totalRect.x + totalRect.width - resizerWidth * 2) {
newPosition = totalRect.x + totalRect.width - resizerWidth * 2;
}
if (newPosition - resizerWidth <= leftRect.x) {
newPosition = leftRect.x + resizerWidth;
}
}

向正在拖动的调整大小器添加一个新坐标。

resizeElement.style.left = newPosition + "px";

设置显示的调整大小器日期范围的指示符元素坐标。

const rangeIndicator = document.querySelector(".range_indicator");

rangeIndicator.style.left = leftResizer.offsetLeft + margin + "px";
rangeIndicator.style.width = rightResizer.offsetLeft - leftResizer.offsetLeft + "px";

下一步是将两个调整器的坐标与路线图数据关联起来。在这里您应该获得任务日期范围,并在此范围内以天为单位计算持续时间。

const range = gantt.getSubtaskDates();
const rangeDuration = gantt.calculateDuration(range.start_date, range.end_date);

现在我们应该提到用于转换值的逻辑。对于左侧调整大小器,您应该沿x轴取其坐标(offsetLeft)并减去左侧边距。结果值应该除以任务日期范围的持续时间,然后乘以指示任务日期范围的元素的宽度。类似的逻辑适用于正确的调整大小器,只是您必须添加替代减去边距。

const leftPos = Math.round((leftResizer.offsetLeft - margin) / totalRect.width * rangeDuration);
const rightPos = Math.round((rightResizer.offsetLeft + margin) / totalRect.width * rangeDuration);

结果将是必须添加到任务日期范围的开始日期天数,您必须将这些值添加到start_date和end_date配置中。要重新绘制更改,需要使用render()方法。

gantt.config.start_date = gantt.date.add(range.start_date, leftPos, "day");
gantt.config.end_date = gantt.date.add(range.start_date, rightPos, "day")

gantt.render()

这些主要步骤将允许您构建与示例类似的jira路线图。

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值