dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

dhtmlxGantt试用版

var textEditor = {type: "text", map_to: "text"};var dateEditor = {type: "date", map_to: "start_date", min: new Date(2020, 0, 1), max: new Date(2021, 0, 1)};var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};gantt.config.columns = [     {name: "text", tree: true, width: '*', resize: true, editor: textEditor},     {name: "start_date", align: "center", resize: true, editor: dateEditor},     {name: "duration", align: "center", editor: durationEditor},     {name: "add", width: 44}];

为此，首先，我们需要在甘特 格中添加一个额外的列，并在其中放置一个颜色选择器。我们可以从简单的HTML5颜色输入开始。

让我们从文档中复制代码示例并将其用作模板：

gantt.config.editor_types.color = {  show: function (id, column, config, placeholder) {        var html = "<div><input type='color' name='" + column.name + "'></div>";        placeholder.innerHTML = html;  },  hide: function () {},  set_value: function (value, id, column, node) {    this.get_input(node).value = value;  },  get_value: function (id, column, node) {    return this.get_input(node).value || "";  },  is_changed: function (value, id, column, node) {    var input = this.get_input(node);    return input.value !== value;  },  get_input: function(node) {    return node.querySelector("input");  },  is_valid: function (value, id, column, node) {    var input = this.get_input(node);    return !!input.value;  },  focus: function(node){    var input = this.get_input(node);    input.focus();  }}

确保重命名控件并更改显示功能以创建颜色输入。

我们不需要hide方法，因为我们的输入在隐藏之后不需要任何析构函数或后处理，因此我们可以将其保留为空。

is_valid方法听起来很有效，返回false会告诉Gantt输入值无效，应将其丢弃。

var textEditor = {type: "text", map_to: "text"};var dateEditor = {type: "date", map_to: "start_date", min: new Date(2020, 0, 1), max: new Date(2021, 0, 1)};var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};var colorEditor = {type: "color", map_to: "color"};gantt.config.columns = [    {name: "text", tree: true, width: '*', resize: true, editor: textEditor},    {name: "start_date", align: "center", resize: true, editor: dateEditor},    {name: "duration", align: "center", editor: durationEditor},    {name: "color", align: "center", label:"Color", editor: colorEditor},    {name: "add", width: 44}];

现在，如果我们向数据添加一些值，您应该会看到它正在运行：

最后，我们将在颜色栏中正确显示颜色。它是通过模板完成的，就像我们在以前的视频教程之一中向您展示的那样。我们将定义一个模板，该模板将返回具有指定背景颜色样式的div元素：

{name: "color", align: "center", label:"Color", editor: colorEditor, template:    function(task){        return "<div class='task-color-cell' style='background:" + task.color + "'></div>"}},

并应用一些样式以正确显示它：

.task-color-cell{  margin:10%;  width:20px;  height:20px;  border:1px solid #cecece;  display:inline-block;  border-radius:20px;}

如果您要使用适当的颜色选择器小部件，则代码不会有太大区别。我们可以集成第三方颜色选择器，例如名为Spectrum的jquery插件。

第一步是将Spectrum库文件添加到我们的示例中。

var editor;gantt.config.editor_types.color = {  show: function (id, column, config, placeholder) {        var html = "<div><input type='color' name='" + column.name + "'></div>";        placeholder.innerHTML = HTML;        editor = $(placeholder).find("input").spectrum({          change: function(){            gantt.ext.inlineEditors.save();          }        });        setTimeout(function(){          editor.spectrum("show");        })  },  hide: function () {    if(editor){      editor.spectrum("destroy");      editor = null;    }  },  set_value: function (value, id, column, node) {    editor.spectrum("set", value);  },  get_value: function (id, column, node) {    return editor.spectrum("get").toHexString();  },  is_changed: function (value, id, column, node) {    var newValue = this.get_value(id, column, node);    return newValue !== value;  },  is_valid: function (value, id, column, node) {    var newValue = this.get_value(id, column, node);    return !!newValue;  },  focus: function(node){    editor.spectrum("show");  }}

首先，我们需要修改show方法。调用它时，我们需要初始化并显示颜色选择器小部件。请注意，在我们的示例中，我们从超时开始调用show方法。需要确保在将所有HTML元素插入文档后尝试显示它。

其余方法相对直观，与我们最初的实现没有太大差异。我们需要修改从控件获取值的方式。

完成后，一切都将按预期工作。

准备好自己尝试了吗下载免费的Gantt试用版，并按照我们的教程进行！

dhtmlxGantt可以集成到APS生产计划排程系统中，实现计划修改、滚动排程、临时插单等高级智能功能，帮助企业实现数字化或智能工厂的转型。

相关产品推荐：

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

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

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

phGantt Time Package：对任务和时间的分配管理的甘特图