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

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

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

配置通用甘特圖功能

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

排序的列

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

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

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

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

任務(wù)重新排序

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

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

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

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

gantt.config.order_branch_free = true;

當(dāng)在具有大量任務(wù)的甘特圖中啟用分支模式時，可能會導(dǎ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ù)上，例如您可以對甘特圖時間軸中的任務(wù)使用不同的顏色來強調(diào)他們的優(yōu)先級。對于我們的甘特圖組件，你可以通過應(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ù)，它們對應(yīng)于特定的優(yōu)先級級別——高、中、低。

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

內(nèi)聯(lián)編輯是一項基本功能，它使最終用戶能夠動態(tài)地在網(wǎng)格區(qū)域中引入各種更改。DHTMLX JavaScript甘特庫附帶了幾個內(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}
];

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

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

自動調(diào)度

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

gantt.plugins({
auto_scheduling: true
});

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

gantt.config.auto_scheduling = true;

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

結(jié)論

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