dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動(dòng)態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動(dòng)之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

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

假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)帶有自定義按鈕的列來執(zhí)行用戶操作：

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

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之類的東西向每個(gè)按鈕添加事件偵聽器。取而代之的是，我們可以使用內(nèi)聯(lián)onclick屬性添加處理程序，也可以使用稱為事件委托的方法-向不受重繪影響的父元素添加單個(gè)事件偵聽器，并在其中捕獲單擊。幸運(yùn)的是，Gantt提供了一個(gè)公共單擊事件，該事件將在用戶每次單擊與任務(wù)相關(guān)的元素時(shí)觸發(fā)。

我們可以在那里捕獲用戶點(diǎn)擊：

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

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

至于列標(biāo)題，我們可以將其HTML放入列的label屬性中，并在其中添加內(nèi)聯(lián)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>'
                );
        }}
    ];

可以將相同的方法用于更復(fù)雜的控件，例如將下拉菜單添加到網(wǎng)格標(biāo)題中：

您可能已經(jīng)猜到了，我們還將在列標(biāo)簽中添加所需的HTML。在這種情況下，我們將有一個(gè)內(nèi)聯(lián)onclick參數(shù)，它將打開一個(gè)下拉菜單。請(qǐng)注意，該處理程序必須在全局范圍內(nèi)可用，因此我們?cè)趃antt對(duì)象中對(duì)其進(jìn)行定義：

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輕松地將自定義元素（例如按鈕或輸入）添加到網(wǎng)格列中。

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

dhtmlxGantt可以集成到慧都APS生產(chǎn)計(jì)劃排程系統(tǒng)中，實(shí)現(xiàn)計(jì)劃修改、滾動(dòng)排程、臨時(shí)插單等高級(jí)智能功能，幫助企業(yè)實(shí)現(xiàn)數(shù)字化或智能工廠的轉(zhuǎn)型。

相關(guān)產(chǎn)品推薦：

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

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺(tái)jQuery Gantt包

phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖