dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

在這里，我們提供了一個dhtmlxGantt視頻教程，專門介紹dhtmlxGantt中的網格配置。在此視頻中，我們將討論如何將各種按鈕，圖標和下拉菜單添加到JavaScript甘特圖的網格單元格和標題中：

假設我們需要創建一個帶有自定義按鈕的列來執行用戶操作：

例如，我們可以使用以下模板和“Font Awesome”圖標添加按鈕：

gantt.config.columns = [
        {name: "text", tree: true, width: '*', resize: true},
        {name: "start_date", align: "center", resize: true},
        {name: "duration", align: "center"},
        {name: "buttons",label: colHeader,width: 75,template: function (task) {
            return (
                '<i class="fa fa-pencil" data-action="edit"></i>' +
                '<i class="fa fa-plus" data-action="add"></i>' +
                '<i class="fa fa-times" data-action="delete"></i>'
                );
        }}
    ];

由于按鈕將與行的其余部分一起重新繪制，因此我們不能僅使用'addEventListener'或jquery click handler之類的東西向每個按鈕添加事件偵聽器。取而代之的是，我們可以使用內聯onclick屬性添加處理程序，也可以使用稱為事件委托的方法-向不受重繪影響的父元素添加單個事件偵聽器，并在其中捕獲單擊。幸運的是，Gantt提供了一個公共單擊事件，該事件將在用戶每次單擊與任務相關的元素時觸發。

我們可以在那里捕獲用戶點擊：

gantt.attachEvent("onTaskClick", function(id, e){
        var button = e.target.closest("[data-action]")
        if(button){
            var action = button.getAttribute("data-action");
            switch (action) {
                case "edit":
                    gantt.showLightbox(id);
                    break;
                case "add":
                    gantt.createTask(null, id);
                    break;
                case "delete":
                    gantt.confirm({
                        title: gantt.locale.labels.confirm_deleting_title,
                        text: gantt.locale.labels.confirm_deleting,
                        callback: function (res) {
                            if (res)
                                gantt.deleteTask(id);
                        }
                    });
                    break;
            }
            return false;

        }
        return true;
    });

在處理程序中，我們檢查單擊的元素是否是我們的按鈕之一，如果是，則確定應執行的操作，然后執行。

至于列標題，我們可以將其HTML放入列的label屬性中，并在其中添加內聯onclick處理程序：

var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>';

    gantt.config.columns = [
        {name: "text", tree: true, width: '*', resize: true},
        {name: "start_date", align: "center", resize: true},
        {name: "duration", align: "center"},
        {name: "buttons",label: colHeader,width: 75,template: function (task) {
            return (
                '<i class="fa fa-pencil" data-action="edit"></i>' +
                '<i class="fa fa-plus" data-action="add"></i>' +
                '<i class="fa fa-times" data-action="delete"></i>'
                );
        }}
    ];

可以將相同的方法用于更復雜的控件，例如將下拉菜單添加到網格標題中：

您可能已經猜到了，我們還將在列標簽中添加所需的HTML。在這種情況下，我們將有一個內聯onclick參數，它將打開一個下拉菜單。請注意，該處理程序必須在全局范圍內可用，因此我們在gantt對象中對其進行定義：

gantt.$showDropdown = function(node){
    var position = node.getBoundingClientRect();
    var dropDown = getDropdownNode();
    dropDown.style.top = position.bottom + "px";
    dropDown.style.left = position.left + "px";
    dropDown.style.display = "block";
    dropDown.keep = true;
    setTimeout(function(){
      dropDown.keep = false;
    })
  }
  gantt.$hideDropdown = function(){
    var dropDown = getDropdownNode();
    dropDown.style.display = "none";
  }
  window.addEventListener("click", function(event){
    if(!event.target.closest("#gantt_dropdown") && !getDropdownNode().keep){
      gantt.$hideDropdown();
    }
  })

  var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div><div class="gantt-dropdown" onclick="gantt.$showDropdown(this)">&#9660;</div>';

  gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "buttons",label: colHeader,width: 75,template: function (task) {
      return (
        '<i class="fa fa-pencil" data-action="edit"></i>' +
        '<i class="fa fa-plus" data-action="add"></i>' +
        '<i class="fa fa-times" data-action="delete"></i>'
        );
    }}

這樣，您可以借助HTML輕松地將自定義元素（例如按鈕或輸入）添加到網格列中。

為了自己嘗試所有這些，請獲取我們的JavaScript Gantt的免費試用版，并按照我們的視頻教程中的步驟進行操作！我們將期待您的反饋，以及您希望在視頻中看到的其他想法。

dhtmlxGantt可以集成到慧都APS生產計劃排程系統中，實現計劃修改、滾動排程、臨時插單等高級智能功能，幫助企業實現數字化或智能工廠的轉型。

相關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖