Расширение встроенных редакторов

Подробнее об расширении встроенных редакторов читайте в статье Встроенное редактирование в грид.

Объект inlineEditors обладает следующим API:

Методы

Действия:

• startEdit (taskId, columnName): void - открывает редактор в указанной задаче/ячейке, устанавливает сопоставленное значение и устанавливает фокус на редактор
  • taskId - (number | string) - идентификатор задачи
  • columnName - (string) - имя столбца
• show (taskId, columnName): void - открывает пустой редактор в указанной задаче/ячейке
  • taskId - (number | string) - идентификатор задачи
  • 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 - влево.

Помощники:

• 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) - идентификатор редактируемой задачи
  • 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) - идентификатор редактируемой задачи
  • 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) - идентификатор редактируемой задачи
  • 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) - идентификатор редактируемой задачи
  • 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) - идентификатор редактируемой задачи
  • columnName - (string) - имя столбца

var inlineEditors = gantt.ext.inlineEditors;

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