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

甘特图的一项基本功能是能够快速编辑项目数据。在本教程中，我们将分享有关如何设置内联编辑并使最终用户能够直接从UI创建和更改甘特任务的提示，你可以查看视频教程或文章内容。

最终用户可以通过两种方式编辑甘特图数据：

使用灯箱编辑表单；

通过网格区域中的内联编辑器。

内联编辑器为用户提供了比灯箱表单更大的优势，从而加快了编辑任务以及与我们的HTML甘特图进行交互的过程。因此，可以通过内置编辑器直接在网格中对甘特图数据进行所有更改，例如创建或更新任务，连接任务以及定义任务日期和持续时间。

内置编辑器，用于从UI编辑甘特图数据

让我们更深入地研究DHTMLX 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};

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}

];

编辑器对象应具有应与定义的编辑器类型之一匹配的type属性，以及将编辑器绑定到任务对象的属性的map_to属性。

其余设置特定于某些类型的编辑器。例如，您可以为数字和日期编辑器指定最小值和最大值。

您还可以通过将特殊格式的对象添加到Gantt配置中来定义一种新型的编辑器。编辑器的公共API相当广泛，它提供方法和事件来控制其工作的各个方面。

如何创建自定义内联编辑器

假设您需要指定甘特任务的颜色。甘特图网格中没有内置的颜色选择器来更改任务的颜色，因此让我们自己设置一个自定义的内联编辑器。

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

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

gantt.config.editor_types.color = {

show: function (id, column, config, placeholder) {

var html = "

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

接下来的两个重要方法是set_value和get_value。打开编辑器以使用任务中的值填充编辑器时，将调用前者。当用户保存编辑器时调用后者；返回值将应用于任务对象。

下一步是is_changed函数。由于可以轻松地打开和关闭编辑器，因此我们只希望在用户修改编辑器值时触发数据更改。在此方法内部，我们需要将提供给编辑器的初始值与当前值进行比较，如果值不同，则返回布尔值true。返回true将使用新值更新任务，返回false将仅关闭编辑器。

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

对于进行多个更改而不是修改任务的单个属性的复杂编辑器(例如，前任选择器)，需要save方法。因此，让我们删除它。

最后是应该将浏览器焦点置于编辑器中的focus方法。

现在我们有一个现成的内联编辑器，用于选择任务颜色。

下一步是将新列添加到网格配置，并将编辑器配置附加到它。请注意，颜色编辑器的type属性必须与我们上面用于编辑器的名称匹配。map_to值将定义任务对象的属性，以便编辑器写入值。我们在这里使用color属性，因为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 "

}},

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

.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 = "

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元素插入文档后尝试显示它。

接下来，我们需要定义hide方法。当编辑器关闭时，我们将调用析构函数。

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

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

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

dhtmlxGantt可以集成到慧都

相关产品推荐：

想要购买dhtmlxGantt正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

文章转载自：DHTMLX

1

好文不易，鼓励一下吧！