内联编辑器扩展

您可以在文章在网格中进行内联编辑中找到关于内联编辑器扩展的更多信息。
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 - 移除之前添加的事件处理器
- id - (string) - 事件处理器ID

导航方法:

editNextCell (canChangeRow): void - 保存当前编辑器并移动到下一个单元格
- canChangeRow? - (boolean) - 指定是否允许在当前行最后一个单元格后跳转到下一行第一个单元格
editNextRow (skipReadonly): void - 保存当前编辑器并在下方任务的同一单元格打开编辑器
- skipReadonly? - (boolean) - 如果为 true，跳过只读任务并在下一个可编辑任务中打开编辑器；如果为 false（默认），当下一个任务为只读时关闭编辑器
editPrevCell (canChangeRow): void - 保存当前编辑器并移动到上一个单元格
- canChangeRow? - (boolean) - 指定是否允许在当前行第一个单元格前跳转到上一行最后一个单元格
editPrevRow (skipReadonly): void - 保存当前编辑器并在上方任务的同一单元格打开编辑器
- skipReadonly? - (boolean) - 如果为 true，跳过只读任务并在上一个可编辑任务中打开编辑器；如果为 false（默认），当上一个任务为只读时关闭编辑器
getFirstCell (): string - 返回网格中第一个可编辑列的名称
getLastCell (): string - 返回网格中最后一个可编辑列的名称
getNextCell (direction): string | null - 返回下一个可编辑列的名称
- direction - (number) - 移动方向：1 代表右，-1 代表左

辅助方法:

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 - 当内联编辑器打开时调用
    - inlineEditors - (InlineEditorMethods) - inlineEditors 对象
    - node - (HTMLElement) - HTML 元素
    - grid - (any) - Grid 布局视图
  - onHide - (Function): void - 当内联编辑器关闭时调用
    - 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};
});