dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。

點擊下載dhtmlxGantt試用版

甘特圖的一項基本功能是能夠快速編輯項目數(shù)據(jù)。在本教程中，我們將分享有關(guān)如何設(shè)置內(nèi)聯(lián)編輯并使最終用戶能夠直接從UI創(chuàng)建和更改甘特任務(wù)的提示，你可以查看視頻教程或文章內(nèi)容。

最終用戶可以通過兩種方式編輯甘特圖數(shù)據(jù)：

• 使用燈箱編輯表單；
• 通過網(wǎng)格區(qū)域中的內(nèi)聯(lián)編輯器。

內(nèi)聯(lián)編輯器為用戶提供了比燈箱表單更大的優(yōu)勢，從而加快了編輯任務(wù)以及與我們的HTML甘特圖進行交互的過程。因此，可以通過內(nèi)置編輯器直接在網(wǎng)格中對甘特圖數(shù)據(jù)進行所有更改，例如創(chuàng)建或更新任務(wù)，連接任務(wù)以及定義任務(wù)日期和持續(xù)時間。

內(nèi)置編輯器，用于從UI編輯甘特圖數(shù)據(jù)

讓我們更深入地研究DHTMLX Gantt內(nèi)聯(lián)編輯器的設(shè)置。

您可以通過將編輯器屬性添加到甘特圖列來使其可編輯：

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}
];

編輯器對象應(yīng)具有應(yīng)與定義的編輯器類型之一匹配的type屬性，以及將編輯器綁定到任務(wù)對象的屬性的map_to屬性。

其余設(shè)置特定于某些類型的編輯器。例如，您可以為數(shù)字和日期編輯器指定最小值和最大值。

您還可以通過將特殊格式的對象添加到Gantt配置中來定義一種新型的編輯器。編輯器的公共API相當(dāng)廣泛，它提供方法和事件來控制其工作的各個方面。

如何創(chuàng)建自定義內(nèi)聯(lián)編輯器

假設(shè)您需要指定甘特任務(wù)的顏色。甘特圖網(wǎng)格中沒有內(nèi)置的顏色選擇器來更改任務(wù)的顏色，因此讓我們自己設(shè)置一個自定義的內(nèi)聯(lián)編輯器。

為此，首先，我們需要在甘特網(wǎng)格中添加一個額外的列，并在其中放置一個顏色選擇器。我們可以從簡單的HTML5顏色輸入開始。

讓我們從文檔中復(fù)制代碼示例并將其用作模板：

gantt.config.editor_types.color = {
  show: function (id, column, config, placeholder) {
        var html = "<div><input type='color' name='" + column.name + "'></div>";
        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();
  }
}

確保重命名控件并更改顯示功能以創(chuàng)建顏色輸入。

我們不需要hide方法，因為我們的輸入在隱藏之后不需要任何析構(gòu)函數(shù)或后處理，因此我們可以將其保留為空。

接下來的兩個重要方法是set_value和get_value。打開編輯器以使用任務(wù)中的值填充編輯器時，將調(diào)用前者。當(dāng)用戶保存編輯器時調(diào)用后者；返回值將應(yīng)用于任務(wù)對象。

下一步是is_changed函數(shù)。由于可以輕松地打開和關(guān)閉編輯器，因此我們只希望在用戶修改編輯器值時觸發(fā)數(shù)據(jù)更改。在此方法內(nèi)部，我們需要將提供給編輯器的初始值與當(dāng)前值進行比較，如果值不同，則返回布爾值true。返回true將使用新值更新任務(wù)，返回false將僅關(guān)閉編輯器。

is_valid方法聽起來很有效，返回false會告訴Gantt輸入值無效，應(yīng)將其丟棄。

最后是應(yīng)該將瀏覽器焦點置于編輯器中的focus方法。

現(xiàn)在我們有一個現(xiàn)成的內(nèi)聯(lián)編輯器，用于選擇任務(wù)顏色。

下一步是將新列添加到網(wǎng)格配置，并將編輯器配置附加到它。請注意，顏色編輯器的type屬性必須與我們上面用于編輯器的名稱匹配。map_to值將定義任務(wù)對象的屬性，以便編輯器寫入值。我們在這里使用color屬性，因為Gantt會自動從該屬性應(yīng)用顏色：

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}
];

現(xiàn)在，如果我們向數(shù)據(jù)添加一些值，您應(yīng)該會看到它正在運行：

最后，我們將在顏色欄中正確顯示顏色。它是通過模板完成的，就像我們在以前的視頻教程之一中向您展示的那樣。我們將定義一個模板，該模板將返回具有指定背景顏色樣式的div元素：

{name: "color", align: "center", label:"Color", editor: colorEditor, template:
    function(task){
        return "<div class='task-color-cell' style='background:" + task.color + "'></div>"
}},

并應(yīng)用一些樣式以正確顯示它：

.task-color-cell{
  margin:10%;
  width:20px;
  height:20px;
  border:1px solid #cecece;
  display:inline-block;
  border-radius:20px;
}

如何使用第三方顏色選擇器創(chuàng)建嵌入式編輯器

如果您要使用適當(dāng)?shù)念伾x擇器小部件，則代碼不會有太大區(qū)別。我們可以集成第三方顏色選擇器，例如名為Spectrum的jquery插件。

第一步是將Spectrum庫文件添加到我們的示例中。

之后，更新我們的控件。我們將定義一個變量，在其中存儲對編輯器實例的引用。當(dāng)輸入隱藏時，我們需要它來調(diào)用析構(gòu)函數(shù)：

var editor;
gantt.config.editor_types.color = {
  show: function (id, column, config, placeholder) {
        var html = "<div><input type='color' name='" + column.name + "'></div>";
        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方法。調(diào)用它時，我們需要初始化并顯示顏色選擇器小部件。請注意，在我們的示例中，我們從超時開始調(diào)用show方法。需要確保在將所有HTML元素插入文檔后嘗試顯示它。

接下來，我們需要定義hide方法。當(dāng)編輯器關(guān)閉時，我們將調(diào)用析構(gòu)函數(shù)。

其余方法相對直觀，與我們最初的實現(xiàn)沒有太大差異。我們需要修改從控件獲取值的方式。

完成后，一切都將按預(yù)期工作。

準備好自己嘗試了嗎？ 下載免費的Gantt試用版，并按照我們的教程進行！

dhtmlxGantt可以集成到慧都APS生產(chǎn)計劃排程系統(tǒng)中，實現(xiàn)計劃修改、滾動排程、臨時插單等高級智能功能，幫助企業(yè)實現(xiàn)數(shù)字化或智能工廠的轉(zhuǎn)型。

相關(guān)產(chǎn)品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務(wù)和時間的分配管理的甘特圖