dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。甘特圖仍然是項(xiàng)目管理應(yīng)用程序中最需要的工具之一，DHTMLX Gantt組件提供了能提升研發(fā)甘特圖功能所需的重要工具。

在這篇文章中，您將學(xué)習(xí)如何添加一個(gè)基本的JavaScript甘特圖到一個(gè)Web應(yīng)用中，并使用純JS/HTML/CSS和配置一些常見的功能來管理項(xiàng)目。

在上文中（點(diǎn)擊這里回顧>>），我們?yōu)榇蠹抑v解了如何下載和安裝DHTMLX Gantt、Gantt初始化、添加甘特圖數(shù)據(jù)等，本文將繼續(xù)介紹通用甘特圖的配置等，請(qǐng)持續(xù)關(guān)注哦~

配置通用甘特圖功能

現(xiàn)在是時(shí)候向您展示如何配置JavaScript甘特圖庫中提供的一些核心功能了，本節(jié)您將了解如何啟用任務(wù)的排序和重新排序、內(nèi)聯(lián)編輯和自定義任務(wù)顏色，下面是你最后應(yīng)該得到的一個(gè)例子：

排序的列

從對(duì)甘特圖網(wǎng)格中的排序列進(jìn)行排序開始，這個(gè)功能是通過在甘特圖配置中將sort屬性的值設(shè)置為true來實(shí)現(xiàn)的。

gantt.config.sort = true;
gantt.init("gantt_here");

最終用戶能夠按所需的順序?qū)⑻囟袑?duì)網(wǎng)格數(shù)據(jù)進(jìn)行排序，只需要單擊其標(biāo)題即可。

或者，這個(gè)功能也可以通過sort()方法的API調(diào)用來實(shí)現(xiàn)。

任務(wù)重新排序

當(dāng)處理大量的項(xiàng)目任務(wù)時(shí)，使用拖放功能垂直重新排序任務(wù)是很方便的。

在我們的甘特圖中，有一個(gè)特殊的分支重新排序模式負(fù)責(zé)這個(gè)功能，它通過將order_branch屬性的值設(shè)置為true來啟用。

gantt.config.order_branch = true;
gantt.init("gantt_here");

請(qǐng)注意，它只允許在同一嵌套級(jí)別內(nèi)重新排序任務(wù)，即子任務(wù)不能移動(dòng)到父任務(wù)的位置。為了消除這個(gè)限制，并允許最終用戶在任何樹級(jí)別放置任務(wù)，你可以應(yīng)用order_branch_free選項(xiàng)：

gantt.config.order_branch_free = true;

當(dāng)在具有大量任務(wù)的甘特圖中啟用分支模式時(shí)，可能會(huì)導(dǎo)致性能下降。在這種情況下，您可以使用旨在加快速度的標(biāo)記模式。

gantt.config.order_branch = "marker";

您也可以使用onBeforeTaskMove事件禁止在其他子分支中放置任務(wù)：

gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
const task = gantt.getTask(id);
if(task.parent != parent)
return false;
return true;
});

任務(wù)著色

著色任務(wù)是一種簡單但有效的方法，可以將用戶的注意力集中在特定的任務(wù)上，例如您可以對(duì)甘特圖時(shí)間軸中的任務(wù)使用不同的顏色來強(qiáng)調(diào)他們的優(yōu)先級(jí)。對(duì)于我們的甘特圖組件，你可以通過應(yīng)用task_class模板來完成。它返回任務(wù)的自定義類名，然后將此名稱用作CSS中的選擇器，用于添加自定義樣式。

<style>
body,
html {
width: 100%;
height: 100%;
margin: unset;
}

.red_color {
background: red;
}

.blue_color {
background: blue;
}

.gray_color {
background: gray;

}

.gantt_task_progress {
background-color: rgba(33, 33, 33, 0.17);
}
</style>

gantt.templates.task_class = function (start, end, task) {
switch (task.priority) {
case "high":
return 'red_color'
case "medium":
return 'blue_color'
case "low":
return 'gray_color'
}
}

在本示例中，我們用三種自定義顏色顯示任務(wù)，它們對(duì)應(yīng)于特定的優(yōu)先級(jí)級(jí)別——高、中、低。

內(nèi)聯(lián)編輯

內(nèi)聯(lián)編輯是一項(xiàng)基本功能，它使最終用戶能夠動(dòng)態(tài)地在網(wǎng)格區(qū)域中引入各種更改。DHTMLX JavaScript甘特庫附帶了幾個(gè)內(nèi)置編輯器，允許更改不同類型的數(shù)據(jù)，如文本、日期、數(shù)字等。

通過編程方式，您必須在列配置中使用editor屬性定義所需的編輯器類型。

gantt.config.columns = [
{name: "text", tree: true, width: '*', resize: true, editor: textEditor},
{name: "start_date", align: "center", resize: true, editor: dateEditor},
{name: "duration", align: "center", editor: durationEditor},
{name: "add", width: 44}
];

編輯器對(duì)象必須包括type屬性(匹配所需的編輯器類型)和map_to屬性(指定任務(wù)對(duì)象的屬性，編輯器將在任務(wù)對(duì)象中存儲(chǔ)值)，這就是如何為包含文本、日期和任務(wù)持續(xù)時(shí)間的列配置編輯器：

const textEditor = { type: "text", map_to: "text" };
const dateEditor = {
type: "date", map_to: "start_date", min: new Date(2023, 0, 1),
max: new Date(2024, 0, 1)
};
const durationEditor = { type: "number", map_to: "duration", min: 0, max: 100 };

自動(dòng)調(diào)度

接下來與您分享如何用自動(dòng)調(diào)度等高級(jí)功能來補(bǔ)充您的甘特圖，應(yīng)該通過gantt啟用auto_scheduling擴(kuò)展，插件方法：

gantt.plugins({
auto_scheduling: true
});

此外，還需要將auto_scheduling屬性設(shè)置為true：

gantt.config.auto_scheduling = true;

因此，JavaScript甘特圖中的所有項(xiàng)目任務(wù)都將根據(jù)它們之間的關(guān)系自動(dòng)調(diào)度，就像這個(gè)例子中一樣。

結(jié)論

正如您所看到的，使用DHTMLX構(gòu)建JavaScript甘特圖的整個(gè)過程非常簡單，廣泛且文檔完備的Gantt API使添加生產(chǎn)性項(xiàng)目管理所需的必要功能變得更加容易。DHTMLX Gantt與流行的JavaScript框架兼容，甚至包括一個(gè)特殊的Node.js模塊，用于在后端管理Gantt。此外，您可以輕松地將甘特組件與其他DHTMLX產(chǎn)品(如Scheduler、看板和To Do List)組合成一個(gè)全面的項(xiàng)目管理應(yīng)用程序。