如何在dhtmlxGantt的网格中添加自定义元素（包括表单控件和progress进度条）

参考文章：www.evget.com/article/202…

参考文章：blog.csdn.net/weixin_4622…

假设我们需要创建一个带有自定义按钮的列来执行用户操作：

例如，我们可以使用以下模板和“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轻松地将自定义元素（例如按钮或输入）添加到网格列中。