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

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

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

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

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

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

現在我們可以繼續在JavaScript甘特圖中添加工具欄。

Step 1：定義工具欄菜單

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

首先，這是一個CSS部分：

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

現在，我們可以繼續編寫JavaScript代碼了：

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

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

{
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";
},
},

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

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

Step 2：創建和初始化工具欄

下一步是創建工具欄的新實例，并在具有toolbar_container ID的容器中初始化它，然后用工具欄項加載數據。

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

Step 3：為單機事件添加處理程序

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

讓我們從點擊事件開始。

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

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

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

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

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

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

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

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

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

然后是導出選項，要導出為Excel格式，您應該使用可視化參數向導出的文件添加類似甘特圖的時間軸。

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：向輸入元素添加事件處理程序

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

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

Step 5：過濾任務

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

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

Step 6：更新日期范圍

如果輸入處理程序中有另一個事件，則意味著應該更新任務的顯示日期范圍。

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

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

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

之后，將值從字符串轉換為日期。

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參數指定日期，現在使用render()方法來呈現更改。

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

當元素失去焦點時觸發inputBlur事件，檢查ID值，如果有start_date或end_date參數，則調用updateDateRange函數。它必須在一段時間后執行，因為如果立即執行，HTML元素仍將具有舊值。

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

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

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

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

本教程中最棘手的部分已經結束。

總結

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

如需了解更多產品資訊，歡迎咨詢“”！