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)">▼</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：对任务和时间的分配管理的甘特图
想要购买dhtmlxGantt正版授权，或了解更多产品信息请点击【咨询在线客服】 
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！