内容导航
产品标签
Gantt
二维码

dhtmlxGantt

交互式的 JavaScript/HTML5 甘特图

以下是 "新版功能"，如果您需要了解更多信息，您可以联系我们。

v 7.0.5

2020年6月19日错误修复发布

  • 当duration_unit config设置为“小时”时，工作时间计算的性能改进。
  • 当duration_unit config设置为“分钟”时，工作时间计算的性能改进。
  • 在的配置对象中指定工作日历的 Gantt.getGanttInstance 功能已添加。

v 7.0.5

2020年6月4日错误修复发布

  • 删除在自动大小模式下的10000像素甘特图的限制，现在允许打印更大的图形。
  • 当用户在文档正文的任何部分而不是仅在甘特图容器上释放鼠标按钮时结束拖放操作。
  • 葡萄牙语区域设置已更新。
  • 修复 gantt.columnIndexByDate 的返回类型。
  • 修复在拖放过程中销毁甘特图实例时激发的脚本错误。
  • Fix the incorrect calculation of end_date/duration when duration_unit is set to "minute" and the last worktime interval finishes after 23:00
  • Fix the issue which caused groups of the grouping extension to expand whenever the user modified any task
  • Fix the issue which caused the second parameter of dataProcessor.setTransactionMode to be ignored if an object was passed into the first parameter
  • Fix the issue which caused the active inline editor to disappear after repaint of Gantt
  • Fix the issue with the static_background extension which caused mouse click on empty cells to be interpreted as a click on task elements
  • Gantt now dynamically repaints links between split tasks during drag and drop
  • Fix the script error which was thrown from gantt.addTask in the node.js package
  • Fix the script error which was thrown from gantt.destructor in the node.js package

v 5.2

功能

  • 在网格中进行内联编辑
  • 拆分任务 (PRO 版本)
  • 更新的键盘导航
  • 自动调度性能改进

配置

  • 能够自动设置任务类型 (PRO 版本)
  • 使用占位符行创建新任务的能力
  • lightbox的复选框和单选按钮控件
  • 更新的内容安全策略扩展

API

  • 用于撤消和自动计划扩展的新方法和事件

在 Grid 行内编辑

dhtmlxGantt 提供两种可选的内容编辑方式：

  • 在 Lightbox 编辑表单的帮助下
  • 通过在网格区域中使用内联编辑器

内联编辑允许您直接通过网格进行任何更改: 创建和更新任务, 设置它们之间的连接, 定义开始和结束日期, 或者通过内置编辑器修改持续时间。

Image

为启用行内编辑，你需要

  • 指定编辑器列表并用 map_to 编辑器到表格的列
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}
];


编辑器的属性

在列类型配置对象中保存行内编辑器，目前支持下面几种编辑器：

  • text editor - for editing text columns, e.g. task name
  • number editor - for editing number columns, e.g. task duration, order, etc.
  • date editor - for editing date columns, e.g. start and end dates of the task
  • select editor - for choosing an option from a list
  • predecessor editor - for setting task-predecessor for the currently edited task. This editor gets the WBS codes of tasks to set connection with the predecessor task.
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"}
};

自定义行内编辑器

下面是例子代码：

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 = "
";
        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) {
  }
}