彩票走势图

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：对任务和时间的分配管理的甘特图