DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。在web项目中使用DHTMLX Gantt时开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力因此本文仅继续介绍DHTMLX Gantt的自定义用例。在这个系列的文章中您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。在上文中主要介绍了如何实现工作项的自定义对话框窗口、自定义网格列等本文将继续介绍如何自定义时间线调整器等欢迎持续关注定制指南自定义时间线调整器路线图顶部还有一个双面调整器可用于更改显示的日期范围路线图包括任务的日期范围和显示的日期范围。它们不是一回事任务日期的范围取决于已加载的任务并根据任务日期进行更改。缺省情况下不指定显示的日期范围取决于任务日期。但是如果您设置了日期范围它将保持不变直到您更改它。现在我们应该介绍关于调整器中日期范围的HTML元素结构在后台有一个元素用于显示任务日期的总范围。在前台你可以看到两个圆的元素作为resizers。在这两个元素之间我们使用了另一个元素它突出显示相对于任务日期范围的显示日期范围。div classrange_resizer titleChange the displayed date range div classtotal_range div classrange_indicator/div div classleft_resizer/div div classright_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路线图。
DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求是最完善的甘特图图表库。在web项目中使用DHTMLX Gantt时开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力因此本文仅继续介绍DHTMLX Gantt的自定义用例。在这个系列的文章中您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。在上文中主要介绍了如何实现工作项的自定义对话框窗口、自定义网格列等本文将继续介绍如何自定义时间线调整器等欢迎持续关注定制指南自定义时间线调整器路线图顶部还有一个双面调整器可用于更改显示的日期范围路线图包括任务的日期范围和显示的日期范围。它们不是一回事任务日期的范围取决于已加载的任务并根据任务日期进行更改。缺省情况下不指定显示的日期范围取决于任务日期。但是如果您设置了日期范围它将保持不变直到您更改它。现在我们应该介绍关于调整器中日期范围的HTML元素结构在后台有一个元素用于显示任务日期的总范围。在前台你可以看到两个圆的元素作为resizers。在这两个元素之间我们使用了另一个元素它突出显示相对于任务日期范围的显示日期范围。div classrange_resizer titleChange the displayed date range div classtotal_range div classrange_indicator/div div classleft_resizer/div div classright_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路线图。
