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) {  }}

• 确保实现is_changed和is_valid功能：
• is_valid用于防止输入无效值。

下面是一个简单数字输入的实现示例。请注意，该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},    ...];

例如，让我们考虑以下使用 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，您需要解释输入值并使用自定义代码将更改应用于甘特图。Gantt 将在方法完成后调用onSave事件save，但不会为修改的行调用gantt.updateTask。

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

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：