DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。

在web項(xiàng)目中使用DHTMLX Gantt時(shí)，開發(fā)人員經(jīng)常需要滿足與UI外觀相關(guān)的各種需求。因此他們必須確定JavaScript甘特圖庫的自定義能力，因此本文僅繼續(xù)介紹DHTMLX Gantt的自定義用例。

在這個(gè)系列的文章中，您將學(xué)習(xí)如何使用DHTMLX Gantt組件構(gòu)建類似jira的項(xiàng)目路線圖。在上文中（點(diǎn)擊這里回顧>>）主要介紹了如何實(shí)現(xiàn)工作項(xiàng)的自定義對(duì)話框窗口、自定義網(wǎng)格列等，本文將繼續(xù)介紹如何自定義時(shí)間線調(diào)整器等，歡迎持續(xù)關(guān)注！

定制指南

自定義時(shí)間線調(diào)整器

路線圖頂部還有一個(gè)雙面調(diào)整器，可用于更改顯示的日期范圍，路線圖包括任務(wù)的日期范圍和顯示的日期范圍。它們不是一回事，任務(wù)日期的范圍取決于已加載的任務(wù)，并根據(jù)任務(wù)日期進(jìn)行更改。缺省情況下，不指定顯示的日期范圍，取決于任務(wù)日期。但是如果您設(shè)置了日期范圍，它將保持不變，直到您更改它。

現(xiàn)在我們應(yīng)該介紹關(guān)于調(diào)整器中日期范圍的HTML元素結(jié)構(gòu)，在后臺(tái)，有一個(gè)元素用于顯示任務(wù)日期的總范圍。在前臺(tái)，你可以看到兩個(gè)圓的元素作為resizers。在這兩個(gè)元素之間，我們使用了另一個(gè)元素，它突出顯示相對(duì)于任務(wù)日期范圍的顯示日期范圍。

<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>

為了使這些元素易于管理，您必須向窗口對(duì)象添加事件處理程序。單擊鼠標(biāo)按鈕后，事件處理程序?qū)z查鼠標(biāo)是否位于左側(cè)或右側(cè)調(diào)整大小器上。如果是，則resizeElement元素保存在resizeElement變量中。

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

在釋放鼠標(biāo)按鈕之后，必須重置變量，以便在移動(dòng)鼠標(biāo)指針時(shí)不會(huì)改變?nèi)魏纹渌麅?nèi)容。

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

如果resizer元素存儲(chǔ)在變量中，則主要操作發(fā)生在mousemove事件中。首先，您需要添加兩個(gè)常量來指定resizer元素的一半寬度(resizerWidth)和左/右縮進(jìn)(margin)。

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

然后將調(diào)整器寬度的一半添加到具有新元素位置的變量中，因此當(dāng)鼠標(biāo)移動(dòng)時(shí)，元素將被放置在中間(而不是右邊)。

let newPosition = e.pageX - resizerWidth;

之后，您將收到兩個(gè)調(diào)整器的HTML元素、任務(wù)的日期范圍以及它們的坐標(biāo)。

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();

然后，您必須根據(jù)坐標(biāo)和調(diào)整器的類型(左或右)修改新調(diào)整器的位置。調(diào)整大小器不應(yīng)該擴(kuò)展到日期范圍元素之外，并且應(yīng)該正確地放置在彼此之間。

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;
}
}

向正在拖動(dòng)的調(diào)整大小器添加一個(gè)新坐標(biāo)。

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

設(shè)置顯示的調(diào)整大小器日期范圍的指示符元素坐標(biāo)。

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

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

下一步是將兩個(gè)調(diào)整器的坐標(biāo)與路線圖數(shù)據(jù)關(guān)聯(lián)起來。在這里您應(yīng)該獲得任務(wù)日期范圍，并在此范圍內(nèi)以天為單位計(jì)算持續(xù)時(shí)間。

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

現(xiàn)在我們應(yīng)該提到用于轉(zhuǎn)換值的邏輯。對(duì)于左側(cè)調(diào)整大小器，您應(yīng)該沿x軸取其坐標(biāo)(offsetLeft)并減去左側(cè)邊距。結(jié)果值應(yīng)該除以任務(wù)日期范圍的持續(xù)時(shí)間，然后乘以指示任務(wù)日期范圍的元素的寬度。類似的邏輯適用于正確的調(diào)整大小器，只是您必須添加替代減去邊距。

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

結(jié)果將是必須添加到任務(wù)日期范圍的開始日期天數(shù)，您必須將這些值添加到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()

這些主要步驟將允許您構(gòu)建與示例類似的jira路線圖。