如何為一個Web應用創(chuàng)建甘特圖？用DHTMLX真的超簡單?。ǘ?/h2>

翻譯|使用教程|編輯：龔雪|2023-08-02 11:29:27.127|閱讀 182 次

概述：本文將為大家介紹如何用DHTMLX組件創(chuàng)建JavaScript甘特圖，歡迎下載工具體驗！

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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

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

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

DHTMLX Gantt正式版下載

配置通用甘特圖功能

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

排序的列

從對甘特圖網(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)。

任務重新排序

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

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

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

請注意，它只允許在同一嵌套級別內(nèi)重新排序任務，即子任務不能移動到父任務的位置。為了消除這個限制，并允許最終用戶在任何樹級別放置任務，你可以應用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;
});

任務著色

著色任務是一種簡單但有效的方法，可以將用戶的注意力集中在特定的任務上，例如您可以對甘特圖時間軸中的任務使用不同的顏色來強調(diào)他們的優(yōu)先級。對于我們的甘特圖組件，你可以通過應用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'
}
}

在本示例中，我們用三種自定義顏色顯示任務，它們對應于特定的優(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屬性(指定任務對象的屬性，編輯器將在任務對象中存儲值)，這就是如何為包含文本、日期和任務持續(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)度等高級功能來補充您的甘特圖，應該通過gantt啟用auto_scheduling擴展，插件方法：

gantt.plugins({
auto_scheduling: true
});

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

gantt.config.auto_scheduling = true;

因此，JavaScript甘特圖中的所有項目任務都將根據(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)組合成一個全面的項目管理應用程序。

標簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都網(wǎng)

上一篇：【DevExpress中文教程】在GridView中動態(tài)創(chuàng)建列時如何綁定不同編輯處理控件 下一篇：DevExpress WinForms Lookup組件中文教程 - 如何實現(xiàn)多項目選擇？