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

點擊下載dhtmlxGantt試用版

dhtmlxGantt提供了兩個用于編輯內(nèi)容的選項：

• 在Lightbox編輯表單的幫助下
• 通過使用“網(wǎng)格”區(qū)域中的內(nèi)聯(lián)編輯器

• 指定編輯器配置列表，并使用編輯器對象的map_to屬性將必要的編輯器映射到網(wǎng)格列

var textEditor = {type: "text", map_to: "text"};
var dateEditor = {type: "date", map_to: "start_date", min: new Date(2018, 0, 1), 
    max: new Date(2019, 0, 1)};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};

• 在列配置中，使用editor屬性來定義應(yīng)在列中使用的編輯器

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

內(nèi)聯(lián)編輯器存儲在editor_types配置對象中。

有幾種預(yù)定義的內(nèi)聯(lián)編輯器：

• 文本編輯器-用于編輯文本列，例如任務(wù)名稱
• 數(shù)字編輯器-用于編輯數(shù)字列，例如任務(wù)持續(xù)時間，訂單等。
• 日期編輯器-用于編輯日期列，例如任務(wù)的開始和結(jié)束日期
• 選擇編輯器-用于從列表中選擇一個選項
• 前任編輯器-用于為當(dāng)前編輯的任務(wù)設(shè)置任務(wù)前任。該編輯器獲取任務(wù)的WBS代碼以設(shè)置與先前任務(wù)的連接。

var editors = {
    text: {type: "text", map_to: "text"},
    start_date: {type: "date", map_to: "start_date", min: new Date(2018, 0, 1), 
        max: new Date(2019, 0, 1)},
    end_date: {type: "date", map_to: "end_date", min: new Date(2018, 0, 1), 
        max: new Date(2019, 0, 1)},
    duration: {type: "number", map_to: "duration", min:0, max: 100},
    priority: {type:"select", map_to:"priority", options:gantt.serverList("priority")},
    predecessors: {type: "predecessor", map_to: "auto"}
};

從v6.3開始，日期內(nèi)聯(lián)編輯器的最小和最大輸入值沒有默認(rèn)限制。

如果希望時間刻度上顯示的日期限制日期內(nèi)聯(lián)編輯器的最小值和最大值（除非提供了自定義的最小值/最大值），則可以指定動態(tài)最小值/最大值：

const dateEditor = {type: "date", map_to: "start_date", 
    min: function(taskId){
      return gantt.getState().min_date
    },
    max: function( taskId ){
      return gantt.getState().max_date
    }
};

如果將格式用于任務(wù)的包含結(jié)束日期，并希望通過網(wǎng)格中的內(nèi)聯(lián)編輯使其正確運(yùn)行，則必須創(chuàng)建一個特殊的編輯器來編輯任務(wù)的包含結(jié)束日期，如下所示：

// inclusive editor for end dates
// use the default editor, but override the set_value/get_value methods
var dateEditor = gantt.config.editor_types.date;
gantt.config.editor_types.end_date = gantt.mixin({
   set_value: function(value, id, column, node){
        var correctedValue = gantt.date.add(value, -1, "day");
        return dateEditor.set_value.apply(this, [correctedValue, id, column, node]);
   },
   get_value: function(id, column, node) {
        var selectedValue = dateEditor.get_value.apply(this, [id, column, node]);
        return gantt.date.add(selectedValue, 1, "day");
   },
}, dateEditor);
 
var textEditor = {type: "text", map_to: "text"};
var startDateEditor = {type: "date", map_to: "start_date"};
var endDateEditor = {type: "end_date", map_to: "end_date"};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
 
gantt.config.columns = [
    {name: "text", label: "Name", tree: true, width: 200, editor: textEditor, 
        resize: true},
    {name: "duration", label: "Duration", width:80, align: "center", 
        editor: durationEditor, resize: true},
    {name: "start_date", label: "Start", width:140, align: "center", 
        editor: startDateEditor, resize: true},
    {name: "end_date", label: "Finish", width:140, align: "center", 
        editor: endDateEditor, resize: true}
];
 
// change lightbox and grid templates to display dates of tasks in an inclusive format
gantt.templates.task_end_date = function(date){
    return gantt.templates.task_date(new Date(date.valueOf() - 1)); 
};
 
 
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function(date, column){
    if(column === "end_date"){
        return gridDateToStr(new Date(date.valueOf() - 1)); 
    }else{
        return gridDateToStr(date); 
    }
}

從v6.3開始，Gantt允許直接從內(nèi)聯(lián)編輯器中指定鏈接的類型以及滯后/超前值。

為此，您需要使用鏈接格式化程序模塊，并將LinksFormatter的一個實例提供到先前的編輯器中：

var formatter = gantt.ext.formatters.durationFormatter({
    enter: "day", 
    store: "day", 
    format: "auto"
});
var linksFormatter = gantt.ext.formatters.linkFormatter({durationFormatter: formatter});
 
var editors = {
    text: {type: "text", map_to: "text"},
    start_date: {type: "date", map_to: "start_date", 
                min: new Date(2018, 0, 1), max: new Date(2019, 0, 1)},
    end_date: {type: "date", map_to: "end_date", 
                min: new Date(2018, 0, 1), max: new Date(2019, 0, 1)},
    duration: {type: "duration", map_to: "duration", 
                min:0, max: 100, formatter: formatter},
    priority: {type: "select", map_to: "priority", 
                options:gantt.serverList("priority")},
    predecessors: {type: "predecessor", map_to: "auto", formatter: linksFormatter} 
};
 
gantt.config.columns = [
    {name: "wbs", label: "#", width: 60, align: "center", template: gantt.getWBSCode},
    {name: "text", label: "Name", tree: true, width: 200, editor: editors.text, 
        resize: true},
    {name: "start_date", label: "Start", width:80, align: "center", 
      editor: editors.start_date, resize: true},
    {name: "predecessors", label: "Predecessors",width:80, align: "left", 
      editor: editors.predecessors, resize: true, template: function(task){
            var links = task.$target;
            var labels = [];
            for(var i = 0; i < links.length; i++){
                var link = gantt.getLink(links[i]);
                labels.push(linksFormatter.format(link)); 
            }
            return labels.join(", ")
        }},
    {name:"add"}
];

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

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不修改任務(wù)對象。該方法僅返回內(nèi)聯(lián)編輯器的當(dāng)前值。如果該值被認(rèn)為是有效的，甘特將使用該值自動更新相關(guān)任務(wù)。
• 使用map_to編輯器的配置選項可以指定任務(wù)的哪個屬性應(yīng)由編輯器更新，但不要將其硬編碼到編輯器中。通過這種方式，您可以將編輯器重用于不同的列。
• 除非您使用復(fù)雜的javascript小部件，否則無需在hide函數(shù)中指定任何邏輯，因此可以將其保留為空。否則，使用此方法調(diào)用析構(gòu)函數(shù)或清理顯示編輯器時附加的任何事件處理程序。
• 確保實現(xiàn)is_changed和is_valid功能：
• 如果is_changed始終返回true，則每次關(guān)閉編輯器時，編輯器都會觸發(fā)更新（可以發(fā)送到后端）。僅當(dāng)輸入值與初始狀態(tài)相比實際發(fā)生更改時，此方法才應(yīng)返回true；否則，該方法應(yīng)返回true。
• is_valid 用于防止輸入無效值。
• 如果您要實現(xiàn)的編輯器比將值寫入任務(wù)的屬性要復(fù)雜的多（例如內(nèi)置的前身編輯器就是一個很好的例子），則需要在save函數(shù)中實現(xiàn)所需的邏輯并指定map_to選項輸入到“ auto”。在這種情況下，甘特圖不會修改任務(wù)對象，而是save在需要將所做的更改應(yīng)用于編輯器時調(diào)用該函數(shù)。

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如果您在內(nèi)聯(lián)編輯器中使用復(fù)雜的小部件，則可能需要添加邏輯。

例如，讓我們考慮以下使用jQuery的DatePicker輸入的實現(xiàn)。在這種情況下，我們需要在將日期選擇器小部件與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ù)的多個屬性，或者希望它修改不同于任務(wù)的對象時，才需要使用該功能。

在這種情況下，您可以保留適當(dāng)?shù)膶崿F(xiàn)以get_value進(jìn)行內(nèi)置驗證，但是gantt本身不會嘗試將編輯器的值應(yīng)用于任務(wù)，save而是將調(diào)用該函數(shù)。

之后save被調(diào)用時，你需要解釋的輸入值，并應(yīng)用變?yōu)閹в凶远x代碼甘特。方法完成后，Gantt將調(diào)用onSave事件save，但不會為修改后的行調(diào)用gantt.updateTask。

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

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

關(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ù)和時間的分配管理的甘特圖

APS幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)排程可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場景的生產(chǎn)計劃，提高準(zhǔn)時交貨能力，提高產(chǎn)能和資源利用率