quickInfo-Erweiterung

Lesen Sie Details zur quickInfo-Erweiterung im Artikel Quick Info (Touch Support).

Das quickInfo-Objekt besitzt die folgende API:

Methoden

• show (id): void - zeigt das Quick Info-Popup für ein angegebenes Element
  • id - (number | string) - die Aufgaben-ID

gantt.ext.quickInfo.show("1");

• show (x, y): void - zeigt das Quick Info-Popup an bestimmten Koordinaten
  • x - (number | string) - horizontale Koordinate
  • y - (number | string) - vertikale Koordinate

gantt.ext.quickInfo.show(10,30);

• hide (force): HTMLElement - versteckt das Quick Info-Popup. Wenn gantt.config.quick_info_detached auf false gesetzt ist, verschwindet das Quick Info nicht sofort, sondern nach einer kurzen Animation. Die Angabe eines Werts von true als Argument wird die Animation abbrechen und das Popup sofort entfernen.
  • force? - (boolean) - definiert, ob das Quick Info-Popup sofort ohne Animation versteckt wird

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// verstecke das Popup nach einer kurzen Animation
gantt.ext.quickInfo.hide();
 
// verstecke das Popup sofort
gantt.ext.quickInfo.hide(true);

• setContainer (container): void - setzt einen Container, in dem das Quick Info angezeigt wird. Falls kein benutzerdefinierter Container angegeben ist, wird QuickInfo in dem ersten der gefundenen Knoten platziert: gantt.$task, gantt.$grid, gantt.$root
  • container - (HTMLElement | string) - Containelement oder dessen ID

gantt.ext.quickInfo.setContainer(document.body);
gantt.ext.quickInfo.show(1300,100);

• getNode (): HTMLElement | null - gibt das HTMLElement des Quick Info-Popups zurück. Gibt null zurück, wenn das Quick Info nicht initialisiert ist

const node = gantt.ext.quickInfo.getNode();

Das zurückgegebene DOM-Element des angezeigten Quick Info sieht wie folgt aus:

• setContent (config): void - setzt den Inhalt in das Quick Info
  • config? - (object) - optional, das Konfigurationsobjekt einer Quick Info, das die folgenden Attribute enthalten kann:
    • taskId? - (string | number) - optional, die ID der Aufgabe, mit der die Aktions-Schaltflächen der Quick Info verbunden werden
    • header? - (object) - optional, der Header des Pop-up-Edit-Formulars, der Folgendes umfassen kann:
      • title? - (string) - optional, der Titel des Pop-up-Edit-Formulars
      • date? - (string) - optional, das Datum des Pop-up-Edit-Formulars
    • content? - (string) - optional, der Inhalt des Pop-up-Edit-Formulars
    • buttons? - (string[]) - optional, Buttons, die im Pop-up-Edit-Formular platziert werden sollen

Wenn weder Header noch Buttons angegeben sind, werden die entsprechenden Bereiche des Quick Info-Popups versteckt.

Hier ist, wie das Konfigurationsobjekt der setContent-Methode aussehen kann:

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
quickInfo.show(task.id);
quickInfo.setContent({
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    },
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons
});

oder

Sie können ein benutzerdefiniertes Pop-up ohne Header und Buttons erstellen:

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
quickInfo.setContent({
    content: "my custom html",
    buttons: []
});