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

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

在上文中（點擊這里回顧>>），我們為大家講解了如何下載和安裝DHTMLX Gantt、Gantt初始化、添加甘特圖數據等，本文將繼續介紹通用甘特圖的配置等，請持續關注哦~

配置通用甘特圖功能

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

排序的列

從對甘特圖網格中的排序列進行排序開始，這個功能是通過在甘特圖配置中將sort屬性的值設置為true來實現的。

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

最終用戶能夠按所需的順序將特定列對網格數據進行排序，只需要單擊其標題即可。

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

任務重新排序

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

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

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

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

gantt.config.order_branch_free = true;

當在具有大量任務的甘特圖中啟用分支模式時，可能會導致性能下降。在這種情況下，您可以使用旨在加快速度的標記模式。

gantt.config.order_branch = "marker";

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

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

任務著色

著色任務是一種簡單但有效的方法，可以將用戶的注意力集中在特定的任務上，例如您可以對甘特圖時間軸中的任務使用不同的顏色來強調他們的優先級。對于我們的甘特圖組件，你可以通過應用task_class模板來完成。它返回任務的自定義類名，然后將此名稱用作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'
}
}

在本示例中，我們用三種自定義顏色顯示任務，它們對應于特定的優先級級別——高、中、低。

內聯編輯

內聯編輯是一項基本功能，它使最終用戶能夠動態地在網格區域中引入各種更改。DHTMLX JavaScript甘特庫附帶了幾個內置編輯器，允許更改不同類型的數據，如文本、日期、數字等。

通過編程方式，您必須在列配置中使用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屬性(指定任務對象的屬性，編輯器將在任務對象中存儲值)，這就是如何為包含文本、日期和任務持續時間的列配置編輯器：

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

自動調度

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

gantt.plugins({
auto_scheduling: true
});

此外，還需要將auto_scheduling屬性設置為true：

gantt.config.auto_scheduling = true;

因此，JavaScript甘特圖中的所有項目任務都將根據它們之間的關系自動調度，就像這個例子中一樣。

結論

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