Inline-Editor-Erweiterung

Für weitere Details zur Inline-Editor-Erweiterung können Sie den Artikel Inline-Bearbeitung im Raster einsehen. Das inlineEditors-Objekt bietet die folgende API:

Methoden

Aktionen:

• startEdit (taskId, columnName): void - Diese Methode öffnet einen Editor für eine bestimmte Aufgabe und Zelle, setzt deren Wert und fokussiert den Editor im Browser.

  • taskId - (number | string) - Die ID der Aufgabe.
  • columnName - (string) - Der Name der Spalte.

• show (taskId, columnName): void - Öffnet einen leeren Editor in einer angegebenen Aufgabe und Zelle.

  • taskId - (number | string) - Die ID der Aufgabe.
  • columnName - (string) - Der Name der Spalte.

• setValue (): void - Füllt den aktuell geöffneten Editor mit den Werten der Aufgabe.

• save (): void - Speichert alle vorgenommenen Änderungen und schließt den Editor.

• hide (): void - Schließt den Editor, ohne Änderungen zu speichern.

• focus (): void - Fokussiert den Browser auf den Editor.

• getState (): object - Ruft den aktuellen Zustand des Editors als Objekt ab: {id: taskId, columnName: columnName, placeholder: HTMLElement}.

• getValue (): string - Ruft den aktuellen Wert aus dem Editor ab.

Zustand:

• isChanged (): boolean - Überprüft, ob der aktuelle Wert des Editors im Vergleich zu seinem Anfangswert geändert wurde.

• isVisible (): boolean - Überprüft, ob der Editor derzeit sichtbar ist.

Ereignisse:

• attachEvent (name, handler): string - Verknüpft einen Ereignishandler mit dem inlineEditors-Objekt.

  • name - (string) - Name des Ereignisses.
  • handler - (Function) - Die Funktion, die ausgeführt wird, wenn das Ereignis eintritt.

• detachEvent (id): void - Entfernt einen zuvor mit attachEvent() angefügten Ereignishandler.

  • id - (string) - Die ID des Ereignishandlers.

Navigation:

• editNextCell (canChangeRow): void - Speichert den Inhalt des aktuellen Editors und wechselt zum Editor der nächsten Zelle.

  • canChangeRow? - (boolean) - Gibt an, ob der Editor zur ersten Zelle der nächsten Zeile wechseln kann, nachdem er die letzte Zelle der aktuellen Zeile erreicht hat.

• editNextRow (skipReadonly): void - Speichert den Inhalt des aktuellen Editors und öffnet den Editor in derselben Zelle der nächsten Aufgabe.

  • skipReadonly? - (boolean) - Bestimmt, ob schreibgeschützte Aufgaben übersprungen werden sollen, um zur ersten bearbeitbaren Aufgabe zu gelangen. Standardmäßig false, was den Editor schließt, wenn die nächste Aufgabe schreibgeschützt ist.

• editPrevCell (canChangeRow): void - Speichert den Inhalt des aktuellen Editors und wechselt zum Editor der vorherigen Zelle.

  • canChangeRow? - (boolean) - Gibt an, ob der Editor zur letzten Zelle der vorherigen Zeile wechseln kann, nachdem er die erste Zelle der aktuellen Zeile erreicht hat.

• editPrevRow (skipReadonly): void - Speichert den Inhalt des aktuellen Editors und öffnet den Editor in derselben Zelle der vorherigen Aufgabe.

  • skipReadonly? - (boolean) - Bestimmt, ob schreibgeschützte Aufgaben übersprungen werden sollen, um zur ersten bearbeitbaren Aufgabe zu gelangen. Standardmäßig false, was den Editor schließt, wenn die vorherige Aufgabe schreibgeschützt ist.

• getFirstCell (): string - Gibt den Namen der ersten bearbeitbaren Spalte im Raster zurück.

• getLastCell (): string - Gibt den Namen der letzten bearbeitbaren Spalte im Raster zurück.

• getNextCell (direction): string | null - Holt den Namen der nächsten bearbeitbaren Spalte.

  • direction - (number) - Gibt die Richtung für das Finden der nächsten Zelle an: 1 für rechts, -1 für links.

Helfer:

• locateCell (node): object | null - Überprüft, ob das gegebene DOM-Element eine Aufgaben-Zelle ist und gibt, falls ja, deren Editorzustand als Objekt zurück: {id: taskId, columnName: columnName}.
  • node - (HTMLElement) - Das HTML-Element, das überprüft werden soll.

Maus-/Tastaturzuordnung:

• setMapping (mapping): void - Legt eine benutzerdefinierte Zuordnungskonfiguration fest.

  • mapping - (object) - Das Zuordnungskonfigurationsobjekt:
    • init - (Function): Initialisiert die Zuordnung.
      • inlineEditors - (InlineEditorMethods) - Das inlineEditors-Objekt.
      • grid - (any) - Die Rasterlayoutansicht.
    • onShow - (Function): Wird aufgerufen, wenn der Inline-Editor geöffnet wird.
      • inlineEditors - (InlineEditorMethods) - Das inlineEditors-Objekt.
      • node - (HTMLElement) - Das HTML-Element.
      • grid - (any) - Die Rasterlayoutansicht.
    • onHide - (Function): Wird aufgerufen, wenn der Inline-Editor geschlossen wird.
      • inlineEditors - (InlineEditorMethods) - Das inlineEditors-Objekt.
      • node - (HTMLElement) - Das HTML-Element.
      • grid - (any) - Die Rasterlayoutansicht.
    • destroy - (Function): Bereinigt die Zuordnung.

• getMapping (): object - Ruft die derzeit angewendete Zuordnungskonfiguration ab.

Ereignisse

onBeforeEditStart

Dieses Ereignis wird ausgelöst, bevor sich der Editor öffnet.

Argumente:

• state - (object) - Das Zustandsobjekt des Editors, einschließlich:
  • id - (number | string) - Die ID der zu bearbeitenden Aufgabe.
  • columnName - (string) - Der Name der Spalte.

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

onEditStart

Dieses Ereignis wird ausgelöst, wenn sich der Editor öffnet.

Argumente:

• state - (object) - Das Zustandsobjekt des Editors, einschließlich:
  • id - (number | string) - Die ID der zu bearbeitenden Aufgabe.
  • columnName - (string) - Der Name der Spalte.

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

onBeforeSave

Tritt auf, bevor der Editor Änderungen speichert und schließt.

Argumente:

• state - (object) - Das Zustandsobjekt des Editors, einschließlich:
  • id - (number | string) - Die ID der zu bearbeitenden Aufgabe.
  • columnName - (string) - Der Name der Spalte.
  • oldValue - (any) - Der Anfangswert des Editors.
  • newValue - (any) - Der aktuelle Wert des Editors, der modifiziert werden kann.

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 der Editor Änderungen speichert und die Aufgabe aktualisiert.

Argumente:

• state - (object) - Das Zustandsobjekt des Editors, einschließlich:
  • id - (number | string) - Die ID der zu bearbeitenden Aufgabe.
  • columnName - (string) - Der Name der Spalte.
  • oldValue - (any) - Der Anfangswert 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

Tritt auf, nachdem der Inline-Editor geschlossen wurde.

Argumente:

• state - (object) - Das Zustandsobjekt des Editors, einschließlich:
  • id - (number | string) - Die ID der zu bearbeitenden Aufgabe.
  • columnName - (string) - Der Name der Spalte.

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

Zurück nach oben