Inline-Editor-Erweiterung

Lesen Sie Details zur Inline-Editor-Erweiterung im Artikel Inline Editing in Grid.

Das inlineEditors-Objekt verfügt über die folgende API:

Methoden

Aktionen:

• startEdit (taskId, columnName): void - öffnet einen Editor in der angegebenen Aufgabe/Zelle, setzt den zugeordneten Wert und setzt den Browser-Fokus auf den Editor
  • taskId - (number | string) - die Aufgaben-ID
  • columnName - (string) - der Spaltenname
• show (taskId, columnName): void - öffnet einen leeren Editor in der angegebenen Aufgabe/Zelle
  • taskId - (number | string) - die Aufgaben-ID
  • columnName - (string) - der Spaltenname
• setValue (): void - füllt einen geöffneten Editor mit Werten aus der Aufgabe
• save (): void - speichert Änderungen und versteckt den Editor
• hide (): void - versteckt einen Editor, ohne Änderungen zu speichern
• focus (): void - setzt den Browser-Fokus auf den Editor
• getState (): object - holt das Statusobjekt (id: taskId, columnName: columnName, placeholder: HTMLElement)
• getValue (): string - holt den aktuellen Wert des Editors

Zustand:

• isChanged (): boolean - prüft, ob der aktuelle Editorwert vom ursprünglichen Wert abweicht
• isVisible (): boolean - prüft, ob der Editor geöffnet ist

Ereignisse:

• attachEvent (name, handler): string - hängt einen Ereignishandler an das inlineEditors-Objekt an
  • name - (string) - der Name des Ereignishandlers
  • handler - (Function) - die Funktion, die aufgerufen wird, wenn das Ereignis ausgelöst wird
• detachEvent (id): void - trennt einen an ein Ereignis gehängten Handler (der zuvor durch attachEvent() angehängt wurde)
  • id - (string) - die ID des angehängten Ereignishandlers

Navigation:

• editNextCell (canChangeRow): void - speichert den aktuellen Editor und verschiebt den Editor zur nächsten Zelle
  • canChangeRow? - (boolean) - der Parameter gibt an, ob der Editor nach der letzten Zelle der aktuellen Zeile in die erste Zelle der nächsten Zeile verschoben werden kann
• editNextRow (skipReadonly): void - speichert den aktuellen Editor und öffnet einen Editor in derselben Zelle der Aufgabe darunter
  • skipReadonly? - (boolean) - der Parameter gibt an, ob die schreibgeschützte Aufgabe übersprungen werden soll und der Editor in die Zelle der ersten editierbaren Aufgabe geöffnet wird. Der Standardwert false führt dazu, dass der Editor geschlossen wird, wenn die nächste Aufgabe schreibgeschützt ist.
• editPrevCell (canChangeRow): void - speichert den aktuellen Editor und verschiebt den Editor zur vorherigen Zelle
  • canChangeRow? - (boolean) - der Parameter gibt an, ob der Editor nach der ersten Zelle der aktuellen Zeile in die letzte Zelle der vorherigen Zeile verschoben werden kann
• editPrevRow (skipReadonly): void - speichert den aktuellen Editor und öffnet einen Editor in derselben Zelle der Aufgabe darüber
  • skipReadonly? - (boolean) - der Parameter gibt an, ob die schreibgeschützte Aufgabe übersprungen werden soll und der Editor in die Zelle der ersten editierbaren Aufgabe geöffnet wird. Der Standardwert false beendet den Editor, wenn die vorherige Aufgabe schreibgeschützt ist.
• getFirstCell (): string - gibt den Namen der ersten bearbeitbaren Spalte im Grid zurück
• getLastCell (): string - gibt den Namen der letzten bearbeitbaren Spalte im Grid zurück
• getNextCell (direction): string | null - gibt den Namen der nächsten bearbeitbaren Spalte zurück
  • direction - (number) - der Parameter gibt an, in welche Richtung die folgende Zelle iteriert werden soll. 1 - rechts, -1 - links.

Hilfsfunktionen:

• locateCell (node): object | null - prüft, ob ein übergebenes DOM-Element ein Task-Zellen-Objekt ist und gibt, falls ja, den Editor-Zustand zurück: (id: taskId, columnName: columnName)
  • node - (HTMLElement) - das HTML-Element

Maus-/Tastatur-Zuordnung:

• setMapping (mapping): void - setzt ein Mapping-Objekt
  • mapping - (object) - ein Objekt mit der Mapping-Konfiguration:
    • init - (Function): void - die Methode zur Initialisierung der Zuordnung
      • inlineEditors - (InlineEditorMethods) - das inlineEditors-Objekt
      • grid - (any) - die Grid-Layout-Ansicht
    • onShow - (Function): void - die Methode, die aufgerufen wird, wenn der Inline-Editor geöffnet wird
      • inlineEditors - (InlineEditorMethods) - das inlineEditors-Objekt
      • node - (HTMLElement) - das HTML-Element
      • grid - (any) - die Grid-Layout-Ansicht
    • onHide - (Function): void - die Methode, die aufgerufen wird, wenn der Inline-Editor geschlossen wird
      • inlineEditors - (InlineEditorMethods) - das inlineEditors-Objekt
      • node - (HTMLElement) - das HTML-Element
      • grid - (any) - die Grid-Layout-Ansicht
    • destroy - (Function): void - die Methode zum Zerstören der Zuordnung
• getMapping (): object - gibt ein aktuell angewendetes Mapping-Objekt zurück

Ereignisse

onBeforeEditStart

Argumente:

• state - (object) - das Editor-Zustandsobjekt
  • id - (number | string) - die ID der bearbeiteten Aufgabe
  • columnName - (string) - der Spaltenname

var inlineEditors = gantt.ext.inlineEditors;

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

onEditStart

Argumente:

• state - (object) - das Editor-Zustandsobjekt
  • id - (number | string) - die ID der bearbeiteten Aufgabe
  • columnName - (string) - der Spaltenname

var inlineEditors = gantt.ext.inlineEditors;

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

onBeforeSave

Wird ausgelöst, bevor ein Editor geschlossen wird und Änderungen gespeichert werden

Argumente:

• state - (object) - das Editor-Zustandsobjekt
  • id - (number | string) - die ID der bearbeiteten Aufgabe
  • columnName - (string) - der Spaltenname
  • oldValue - (any) - der ursprüngliche Wert des Editors
  • newValue - (any) - der aktuelle Wert des Editors, kann geändert werden

var inlineEditors = gantt.ext.inlineEditors;

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

onSave

Wird ausgelöst, nachdem ein Task aus dem Editor aktualisiert wurde

Argumente:

• state - (object) - das Editor-Zustandsobjekt
  • id - (number | string) - die ID der bearbeiteten Aufgabe
  • columnName - (string) - der Spaltenname
  • oldValue - (any) - der ursprüngliche Wert des Editors
  • newValue - (any) - der aktuelle Wert des Editors

var inlineEditors = gantt.ext.inlineEditors;

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

onEditEnd

Wird ausgelöst, nachdem ein Inline-Editor ausgeblendet wurde

Argumente:

• state - (object) - das Editor-Zustandsobjekt
  • id - (number | string) - die ID der bearbeiteten Aufgabe
  • columnName - (string) - der Spaltenname

var inlineEditors = gantt.ext.inlineEditors;

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