行内编辑器扩展

请参阅文章 Inline Editing in Grid 了解关于 Inline Editors Extension 的详细信息。

The inlineEditors对象具备以下 API：

方法

操作：

• startEdit (taskId, columnName): void - 在指定的任务/单元格中打开一个编辑器，设置映射的值并将浏览器焦点放在编辑器上
  • taskId - (number | string) - 任务 ID
  • columnName - (string) - 列名
• show (taskId, columnName): void - 在指定的任务/单元格中打开一个空编辑器
  • taskId - (number | string) - 任务 ID
  • columnName - (string) - 列名
• setValue (): void - 用任务中的值填充已打开的编辑器
• save (): void - 保存修改并隐藏编辑器
• hide (): void - 隐藏编辑器但不保存修改
• focus (): void - 将浏览器焦点放在编辑器上
• getState (): object - 获取状态对象（id: taskId, columnName: columnName, placeholder: HTMLElement）
• getValue (): string - 获取编辑器当前值

状态：

• isChanged (): boolean - 检查当前编辑器的值是否与初始值不同
• isVisible (): boolean - 检查编辑器是否已打开

事件：

• attachEvent (name, handler): string - 为 inlineEditors 对象附加事件处理程序
  • name - (string) - 事件处理程序的名称
  • handler - (Function) - 事件触发时将被调用的函数
• detachEvent (id): void - 从事件中分离一个处理程序（此前通过 attachEvent() 方法附加）
  • id - (string) - 已附加的事件处理程序的标识

导航：

• editNextCell (canChangeRow): void - 保存当前编辑器并将编辑器移动到下一个单元格
  • canChangeRow? - (boolean) - 指定在当前单元格的末尾后，是否可以将编辑器移动到下一行的第一格
• editNextRow (skipReadonly): void - 保存当前编辑器并在同一单元格的任务下方打开一个编辑器
  • skipReadonly? - (boolean) - 指定是否跳过只读任务，在第一可编辑任务的单元格中打开编辑器。参数默认 false，若下一任务为只读则关闭编辑器。
• editPrevCell (canChangeRow): void - 保存当前编辑器并将编辑器移动到上一个单元格
  • canChangeRow? - (boolean) - 指定在到达当前行的第一格后，是否可以将编辑器移动到上一行的最后一格
• editPrevRow (skipReadonly): void - 保存当前编辑器并在上一任务的同一单元格中打开编辑器
  • skipReadonly? - (boolean) - 指定是否跳过只读任务，在第一个可编辑任务的单元格中打开编辑器。默认 false 时如果前一个任务是只读的会关闭编辑器。
• getFirstCell (): string - 获取网格中第一个可编辑列的名称
• getLastCell (): string - 获取网格中最后一个可编辑列的名称
• getNextCell (direction): string | null - 返回下一个可编辑列的名称
  • direction - (number) - 指定应在何种方向遍历下一列。1 - 向右，-1 - 向左

Helpers:

• locateCell (node): object | null - 检查提供的 DOM 元素是否为任务单元格对象，并在是时返回编辑器状态对象：(id: taskId, columnName: columnName)
  • node - (HTMLElement) - HTML 元素

鼠标/键盘映射：

• setMapping (mapping): void - 设置映射对象
  • mapping - (object) - 一个包含映射配置的对象：
    • init - (Function): void - 用于初始化映射的方法
      • inlineEditors - (InlineEditorMethods) - inlineEditors 对象
      • grid - (any) - Grid 布局视图
    • onShow - (Function): void - 当 inline editor 打开时将调用的方法
      • inlineEditors - (InlineEditorMethods) - inlineEditors 对象
      • node - (HTMLElement) - HTML 元素
      • grid - (any) - Grid 布局视图
    • onHide - (Function): void - 当 inline editor 关闭时将调用的方法
      • inlineEditors - (InlineEditorMethods) - inlineEditors 对象
      • node - (HTMLElement) - HTML 元素
      • grid - (any) - Grid 布局视图
    • destroy - (Function): void - 销毁映射的方法
• getMapping (): object - 返回当前应用的映射对象

事件

onBeforeEditStart

参数:

• state - (object) - 编辑器状态对象
  • id - (number | string) - 被编辑任务的 id
  • columnName - (string) - 列名

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onBeforeEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
   return true;
});

onEditStart

参数:

• state - (object) - 编辑器状态对象
  • id - (number | string) - 被编辑任务的 id
  • columnName - (string) - 列名

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});

onBeforeSave

在编辑器即将关闭并保存修改时触发

参数:

• state - (object) - 编辑器状态对象
  • id - (number | string) - 被编辑任务的 id
  • columnName - (string) - 列名
  • oldValue - (any) - 编辑器的初始值
  • newValue - (any) - 编辑器当前的值，可能被修改

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onBeforeSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
   return true;
});

onSave

在任务从编辑器中更新后触发

参数:

• state - (object) - 编辑器状态对象
  • id - (number | string) - 被编辑任务的 id
  • columnName - (string) - 列名
  • oldValue - (any) - 编辑器的初始值
  • newValue - (any) - 编辑器当前的值

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
});

onEditEnd

在内联编辑器被隐藏之后触发

参数:

• state - (object) - 编辑器状态对象
  • id - (number | string) - 被编辑任务的 id
  • columnName - (string) - 列名

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onEditEnd", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});