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

今天給大家分享一種方法，通過將DHTMLX Gantt集成工具欄來簡化交互，為此選用了DHTMLX Suite的Toolbar（工具欄）小部件，可以與DHTMLX Gantt平滑地結(jié)合在一起。

在甘特圖中使用工具欄的示例

功能齊全的甘特圖是一種復(fù)雜且經(jīng)過時(shí)間驗(yàn)證的工具，用于管理任何復(fù)雜項(xiàng)目中的工作流。然而掌握它的功能多樣性并在實(shí)際項(xiàng)目中充分利用它通常需要時(shí)間，因此使用輔助控件(如工具欄)來補(bǔ)充甘特圖是合理的，以方便其使用。在下面的示例中，您可以看到一個(gè)基于DHTMLX構(gòu)建的JavaScript甘特圖，其工具欄使用DHTMLX Suite庫中的UI小部件實(shí)現(xiàn)。

工具欄允許最終用戶方便地在甘特圖中執(zhí)行廣泛的操作，例如：

• 撤銷/重做更改
• 一次折疊和展開所有任務(wù)
• 突出關(guān)鍵任務(wù)
• 搜索(過濾)任務(wù)
• 設(shè)置顯示的日期范圍
• 導(dǎo)出數(shù)據(jù)為PDF、PNG、Excel、MSP和Primavera格式

現(xiàn)在我們可以繼續(xù)在JavaScript甘特圖中添加工具欄。

Step 1：定義工具欄菜單

讓我們從使用toolbarItems變量定義工具欄菜單(即工具欄圖標(biāo))的外觀開始，在圖標(biāo)字段中，為圖標(biāo)指定類名，這些圖標(biāo)取自HTML選項(xiàng)卡中啟用的網(wǎng)頁字體(材料設(shè)計(jì)圖標(biāo))。

首先，這是一個(gè)CSS部分：

<link  media="all" rel="stylesheet" type="text/css">

現(xiàn)在，我們可以繼續(xù)編寫JavaScript代碼了：

const toolbarItems = [
{
icon: "mdi mdi-undo-variant",
id: "undo"
},
{
icon: "mdi mdi-redo-variant",
id: "redo"
},
{
icon: "mdi mdi-folder",
id: "close"
},

您可以指定工具欄元素的類型(例如，輸入、日期選擇器等)。否則，將使用默認(rèn)元素類型。

{
id: "search",
type: "input",
placeholder: "Search tasks",
icon: "mdi mdi-magnify",
width: 150,
},
{
type: "datePicker",
value: new Date(2025, 03, 01),
label: "Start:",
width: 150,
id: "start_date",
editable: true,
mark: (date) => {
if (date.getDay() === 5) return "highlight-date";
},
},

在數(shù)組的items參數(shù)中，為下拉列表指定子元素。

{
value: "Export",
id: "export",
items: [
{
value: "Export To PDF",
id: "pdf"
},
{
value: "Export To PNG",
id: "png"
},

Step 2：創(chuàng)建和初始化工具欄

下一步是創(chuàng)建工具欄的新實(shí)例，并在具有toolbar_container ID的容器中初始化它，然后用工具欄項(xiàng)加載數(shù)據(jù)。

const toolbar = new dhx.Toolbar("toolbar_container", { css: "dhx_toolbar--bordered" });
toolbar.data.parse(toolbarItems);

Step 3：為單機(jī)事件添加處理程序

之后，您需要指定在單擊按鈕/輸入文本/選擇日期時(shí)觸發(fā)的事件處理程序。

讓我們從點(diǎn)擊事件開始。

toolbar.events.on("click", function (id, e) {
switch (id) {

對(duì)于展開按鈕，使用eachTask()方法遍歷每個(gè)任務(wù)，并調(diào)用open()方法打開任務(wù)。所有這些都在batchUpdate()方法中完成，因此更改只呈現(xiàn)一次。

case "open":
gantt.batchUpdate(function (task) {
gantt.eachTask(function (task) {
task.$open = true;
})
})
break;

對(duì)于折疊按鈕，您可以使用close()方法進(jìn)行相同的操作。

case "close":
gantt.batchUpdate(function (task) {
gantt.eachTask(function (task) {
task.$open = false;
})
})
break;

對(duì)于撤銷和重做按鈕，您可以使用相應(yīng)的undo()和redo()方法。

case "undo":
gantt.undo()
break;
case "redo":
gantt.redo()
break;

具有critical ID的元素啟用和禁用highlight_critical_path配置，來添加或刪除關(guān)鍵任務(wù)的高亮顯示。

case "critical":
gantt.config.highlight_critical_path = !gantt.config.highlight_critical_path;
gantt.render()
break;
}

然后是導(dǎo)出選項(xiàng)，要導(dǎo)出為Excel格式，您應(yīng)該使用可視化參數(shù)向?qū)С龅奈募砑宇愃聘侍貓D的時(shí)間軸。

case "pdf":
gantt.exportToPDF()
break;
case "png":
gantt.exportToPNG()
break;
case "excel":
gantt.exportToExcel({
visual: true
})
break;
case "msp":
gantt.exportToMSProject()
break;
case "p6":
gantt.exportToPrimaveraP6()
break;

Step 4：向輸入元素添加事件處理程序

接下來，您需要為輸入元素添加事件處理程序。如果它是一個(gè)搜索字段，則將filterValue變量的值更改為一個(gè)新值，并調(diào)用refreshData來呈現(xiàn)更改。

toolbar.events.on("input", function (id, value) {
if (id == "search") {
filterValue = value;
gantt.refreshData()
}

Step 5：過濾任務(wù)

任務(wù)在onBeforeTaskDisplay事件處理程序中進(jìn)行過濾，如果返回false，則不會(huì)顯示任務(wù)。在這里，您將任務(wù)名稱轉(zhuǎn)換為小寫，并查看任務(wù)名稱是否包含來自filterValue的值(也轉(zhuǎn)換為小寫)。

let filterValue = "";
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
if (filterValue && task.text.toLowerCase().indexOf(filterValue) == -1) {
return false;
}
return true;
});

Step 6：更新日期范圍

如果輸入處理程序中有另一個(gè)事件，則意味著應(yīng)該更新任務(wù)的顯示日期范圍。

toolbar.events.on("input", function (id, value) {
if (id == "search") {
filterValue = value;
gantt.refreshData()
}
else {
updateDateRange()
}
});

在updateDateRange函數(shù)中，指定帶有日期的HTML元素。

function updateDateRange() {
const startDateEl = document.querySelector("#start_date");
const endDateEl = document.querySelector("#end_date");

之后，將值從字符串轉(zhuǎn)換為日期。

const startDate = gantt.date.str_to_date("%d/%m/%y")(startDateEl.value);
const endDate = gantt.date.str_to_date("%d/%m/%y")(endDateEl.value);

然后為gantt.config.start_date 和 gantt.config.end_date參數(shù)指定日期，現(xiàn)在使用render()方法來呈現(xiàn)更改。

gantt.config.start_date = startDate;
gantt.config.end_date = endDate;
gantt.render()

當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)inputBlur事件，檢查ID值，如果有start_date或end_date參數(shù)，則調(diào)用updateDateRange函數(shù)。它必須在一段時(shí)間后執(zhí)行，因?yàn)槿绻⒓磮?zhí)行，HTML元素仍將具有舊值。

toolbar.events.on("inputBlur", function (id) {
if (id == "start_date" || id == "end_date") {
setTimeout(function () {
updateDateRange()
}, 200)
}
});

Step 7：把所有東西放在一起

完成所有這些配置步驟后，啟用所有插件(擴(kuò)展)。

gantt.plugins({
undo: true,
critical_path: true,
export_api: true
})

本教程中最棘手的部分已經(jīng)結(jié)束。

總結(jié)

從最后的示例中可以看到，工具欄使最終用戶更容易與甘特圖進(jìn)行交互。使用DHTMLX Suite的工具欄小部件，您可以用最少的時(shí)間和精力將方便的工具欄與JavaScript甘特圖集成在一起，DHTMLX庫的高度可定制性允許實(shí)現(xiàn)完全符合任何項(xiàng)目需求的解決方案。

如需了解更多產(chǎn)品資訊，歡迎咨詢“”！