dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

dhtmlxGantt试用版

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

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

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

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

// inclusive editor for end dates// use the default editor, but override the set_value/get_value methodsvar 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 formatgantt.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);    }}

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

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

editor.save

之后save被调用时，你需要解释的输入值，并应用变为带有自定义代码甘特。方法完成后，Gantt将调用onSave事件save，但不会为修改后的行调用gantt.updateTask。

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

关产品推荐：

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

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

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

phGantt Time Package：对任务和时间的分配管理的甘特图

APS帮助提升企业生产效率，真正实现生产排程可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率