项目管理软件dhtmlxGantt配置教程（七）：如何自定义内联编辑器

骆嘉石

2023-12-01

您可以指定自定义内联编辑器。为此，您需要通过以下方式创建一个新的编辑器对象：

gantt.config.editor_types.custom_editor = {
  show: function (id, column, config, placeholder) {
    // called when input is displayed, put html markup of the editor into placeholder 
    // and initialize your editor if needed:
    var html = "<div><input type='text' name='" + column.name + "'></div>";
    placeholder.innerHTML = html;
  },
  hide: function () {
    // called when input is hidden 
    // destroy any complex editors or detach event listeners from here
  },
 
  set_value: function (value, id, column, node) {
    // set input value
  },
 
  get_value: function (id, column, node) {
    // return input value
  },
 
  is_changed: function (value, id, column, node) {
    //called before save/close. Return true if new value differs from the original one
    //returning true will trigger saving changes, returning false will skip saving 
  },
 
  is_valid: function (value, id, column, node) {
    // validate, changes will be discarded if the method returns false
    return true/false;
  },
 
  save: function (id, column, node) {
     // only for inputs with map_to:auto. complex save behavior goes here
  },
  focus: function (node) {
  }
}

为了实现可重用的编辑器，需要记住一些关键点：

作为一项规则，get_value不修改任务对象。该方法只返回内联编辑器的当前值。如果该值被认为有效，甘特图将自动使用该值更新相关任务。
使用map_to编辑器的配置选项来指定任务的哪个属性应该由编辑器更新，但不要将其硬编码到编辑器中。这种方式允许您为不同的列重用编辑器。
除非您使用复杂的 javascript 小部件，否则您不需要在hide函数中指定任何逻辑，因此您可以将其留空。否则，使用此方法调用析构函数或清理您在显示编辑器时附加的任何事件处理程序。
确保实现is_changed和is_valid功能：
如果is_changed总是返回true，则每次关闭编辑器时，编辑器都会触发更新（可以发送到后端）。仅当输入值与初始状态相比实际发生了变化时，此方法才应返回true ；
is_valid用于防止输入无效值。

如果您正在实现一个编辑器，它比将值写入任务的属性更复杂 - 一个很好的例子是内置的前置编辑器-您需要在save函数中实现所需的逻辑并指定map_to输入“自动”。在这种情况下，甘特图不会修改任务对象，而是会save在需要将所做的更改应用到编辑器时调用该函数。

下面是一个简单数字输入的实现示例。请注意，该hide方法可以是一个空函数，并且该save方法可以完全跳过。

var getInput = function(node){
    return node.querySelector("input");
}; 
gantt.config.editor_types.simpleNumber = {
    show: function (id, column, config, placeholder) {
        var min = config.min || 0,
        max = config.max || 100;
        var html = "<div><input type='number' min='" + min + 
                      "' max='" + max + "' name='" + column.name + "'></div>";
        placeholder.innerHTML = html;
    },
    hide: function () {
      // can be empty since we don't have anything to clean up after the editor 
          // is detached
    },
    set_value: function (value, id, column, node) {
        getInput(node).value = value;
    },
    get_value: function (id, column, node) {
        return getInput(node).value || 0;
    },
    is_changed: function (value, id, column, node) {
        var currentValue = this.get_value(id, column, node);
        return Number(value) !== Number(currentValue);
    },
    is_valid: function (value, id, column, node) {
        return !isNaN(parseInt(value, 10));
    },
    focus: function (node) {
        var input = getInput(node);
        if (!input) {
            return;
        }
        if (input.focus) {
            input.focus();
        }
 
        if (input.select) {
          input.select();
        }
    }
};

之后，您可以像使用内置编辑器一样使用编辑器：

var numberEditor = {type: "simpleNumber", map_to: "quantity", min:0, max: 50}; 
gantt.config.columns = [
    ...
    {name: "quantity", label: "Quantity", width: 80, editor: numberEditor, 
        resize: true},
    ...
];

请注意，在这种情况下我们不需要实现该hide方法，因为甘特图会自动分离编辑器的 DOM 元素，并且在编辑器关闭后我们不需要清理任何其他内容。

编辑器.hide

hide如果您在内联编辑器中使用复杂的小部件，您可能需要添加逻辑。

例如，让我们考虑以下使用 jQuery 实现的 DatePicker 输入。在这种情况下，我们需要在它与 DOM 分离后销毁日期选择器小部件。

先决条件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

编辑：

gantt.config.editor_types.custom_datepicker_editor = {
    show: function (id, column, config, placeholder) {
        placeholder.innerHTML = "<div><input type='text' id='datepicker' name='" + 
                                  column.name + "'></div>";
        $("#datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            onSelect: function(dateStr){
                gantt.ext.inlineEditors.save()
            }
        });
    },
    hide: function (node) {
        $("#datepicker").datepicker( "destroy" );
    },
 
    set_value: function (value, id, column, node) {
        $("#datepicker").datepicker("setDate", value);
    },
 
    get_value: function (id, column, node) {
        return $("#datepicker").datepicker( "getDate" );
    },
 
    is_changed: function (value, id, column, node) {
        return (+$("#datepicker").datepicker( "getDate" ) !== +value);
    },
    is_valid: function (value, id, column, node) {
        return !(isNaN(+$("#datepicker").datepicker( "getDate" )))
    },
    save: function (id, column, node) {
    },
    focus: function (node) {
    }
};
 
let dateEditor = {
    type: "custom_datepicker_editor",
    map_to: "start_date"
};
 
gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true, editor: dateEditor},
    {name: "duration", align: "center"},
    {name: "add", width: 44}
];

编辑器.保存

save只有当您的编辑器需要一次修改任务的多个属性，或者您希望它修改与任务不同的对象时，您才需要使用该功能。

在这种情况下，您可以get_value为内置验证保留正确的实现，但甘特图本身不会尝试将编辑器的值应用于任务，save而是调用该函数。

调用后save，您需要解释输入值并使用自定义代码将更改应用于甘特图。Gantt 将在方法完成后调用onSave事件save，但不会为修改的行调用gantt.updateTask。

笔记！仅当您在编辑器的配置中save指定时才会调用该方法：map_to:"auto"

var editors = {
    ...
    predecessors: {type: "predecessor", map_to: "auto"}
};

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎评论区留言互动，我们一起沟通交流！

项目管理软件dhtmlxGantt配置教程（七）：如何自定义内联编辑器

相关阅读

相关文章

相关问答

相关文档