這篇文章給大家?guī)?a >dhtmlxGantt如何自定義內(nèi)聯(lián)編輯器。

DhtmlxGantt正版試用下載

您可以指定自定義內(nèi)聯(lián)編輯器。為此，您需要通過以下方式創(chuàng)建一個(gè)新的編輯器對(duì)象：

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

為了實(shí)現(xiàn)可重用的編輯器，需要記住一些關(guān)鍵點(diǎn)：

• 作為一項(xiàng)規(guī)則，get_value不修改任務(wù)對(duì)象。該方法只返回內(nèi)聯(lián)編輯器的當(dāng)前值。如果該值被認(rèn)為有效，甘特圖將自動(dòng)使用該值更新相關(guān)任務(wù)。
• 使用map_to編輯器的配置選項(xiàng)來指定任務(wù)的哪個(gè)屬性應(yīng)該由編輯器更新，但不要將其硬編碼到編輯器中。這種方式允許您為不同的列重用編輯器。
• 除非您使用復(fù)雜的 javascript 小部件，否則您不需要在hide函數(shù)中指定任何邏輯，因此您可以將其留空。否則，使用此方法調(diào)用析構(gòu)函數(shù)或清理您在顯示編輯器時(shí)附加的任何事件處理程序。
• 確保實(shí)現(xiàn)is_changed和is_valid功能：
• 如果is_changed總是返回true，則每次關(guān)閉編輯器時(shí)，編輯器都會(huì)觸發(fā)更新（可以發(fā)送到后端）。僅當(dāng)輸入值與初始狀態(tài)相比實(shí)際發(fā)生了變化時(shí)，此方法才應(yīng)返回true ；
• is_valid用于防止輸入無效值。

如果您正在實(shí)現(xiàn)一個(gè)編輯器，它比將值寫入任務(wù)的屬性更復(fù)雜 - 一個(gè)很好的例子是內(nèi)置的前置編輯器-您需要在save函數(shù)中實(shí)現(xiàn)所需的邏輯并指定map_to輸入“自動(dòng)”。在這種情況下，甘特圖不會(huì)修改任務(wù)對(duì)象，而是會(huì)save在需要將所做的更改應(yīng)用到編輯器時(shí)調(diào)用該函數(shù)。

下面是一個(gè)簡單數(shù)字輸入的實(shí)現(xiàn)示例。請(qǐng)注意，該hide方法可以是一個(gè)空函數(shù)，并且該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();
        }
    }
};

之后，您可以像使用內(nèi)置編輯器一樣使用編輯器：

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

請(qǐng)注意，在這種情況下我們不需要實(shí)現(xiàn)該hide方法，因?yàn)楦侍貓D會(huì)自動(dòng)分離編輯器的 DOM 元素，并且在編輯器關(guān)閉后我們不需要清理任何其他內(nèi)容。

編輯器.hide

hide如果您在內(nèi)聯(lián)編輯器中使用復(fù)雜的小部件，您可能需要添加邏輯。

例如，讓我們考慮以下使用 jQuery 實(shí)現(xiàn)的 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只有當(dāng)您的編輯器需要一次修改任務(wù)的多個(gè)屬性，或者您希望它修改與任務(wù)不同的對(duì)象時(shí)，您才需要使用該功能。

在這種情況下，您可以get_value為內(nèi)置驗(yàn)證保留正確的實(shí)現(xiàn)，但甘特圖本身不會(huì)嘗試將編輯器的值應(yīng)用于任務(wù)，save而是調(diào)用該函數(shù)。

調(diào)用后save，您需要解釋輸入值并使用自定義代碼將更改應(yīng)用于甘特圖。Gantt 將在方法完成后調(diào)用onSave事件save，但不會(huì)為修改的行調(diào)用gantt.updateTask。

筆記！僅當(dāng)您在編輯器的配置中save指定時(shí)才會(huì)調(diào)用該方法：map_to:"auto"

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

dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表，可滿足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請(qǐng)點(diǎn)這里！