這篇文章給大家帶來dhtmlxGantt如何自定義內聯編輯器。

DhtmlxGantt正版試用下載

您可以指定自定義內聯編輯器。為此，您需要通過以下方式創建一個新的編輯器對象：

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" >
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://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相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！