Konfigurieren von Lightbox-Elementen

Die Lightbox ist ein Bearbeitungsformular, das zum Ändern von Aufgabendetails verwendet wird. Unten sehen Sie ein Beispiel der Standard-Lightbox.

Lightboxen können je nach Art und spezifischen Merkmalen der Aufgaben, mit denen sie verbunden sind, variieren. Die Konfigurationsdetails für jeden Aufgabentyp sind im lightbox Objekt gespeichert. Diese Konfigurationen beinhalten:

• gantt.config.lightbox.sections - für Standardaufgaben verwendet.
• gantt.config.lightbox.project_sections - spezifisch für Projektaufgaben.
• gantt.config.lightbox.milestone_sections - angepasst für Meilensteine.

Sie können auch einen benutzerdefinierten Typ erstellen und eine spezifische Lightbox-Struktur dafür einrichten. Weitere Details finden Sie im Artikel: Aufgabentypen.

Die allgemeine Struktur für Aufgabentypen umfasst:

• sections? - (LightboxSection[]) - optional, definiert die Lightbox-Sektionen für Standardaufgaben
• project_sections? - (LightboxSection[]) - optional, definiert die Lightbox-Sektionen für Projektaufgaben
• milestone_sections? - (LightboxSection[]) - optional, definiert die Lightbox-Sektionen für Meilensteine
• [lightboxType: string] - (LightboxSection[] | undefined) - definiert die Lightbox-Sektionen für benutzerdefinierte Aufgabentypen

Lightbox-Struktur

Sektionen

Die Lightbox-Struktur wird durch die sections-Eigenschaft innerhalb des Lightbox-Objekts bestimmt:

// Standard-Lightbox-Definition   
gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"duration"}
];

Jeder Eintrag im sections-Array stellt einen spezifischen Abschnitt der Lightbox dar, der durch seine eigenen Eigenschaften definiert ist.

Sektionen-Steuerungen

Jeder Abschnitt in der Lightbox ist mit einem bestimmten Steuerungstyp verbunden. Hier sind die verfügbaren Steuerungstypen für Lightbox-Sektionen:

• Textarea - ein mehrzeiliges Texteingabefeld
• Time - Selektoren zum Festlegen der Aufgabendauer durch Angabe von Start- und Enddatum
• Duration - Selektoren zum Festlegen der Aufgabendauer mit Startdatum und Anzahl der Tage
• Select - ein einfaches Dropdown-Menü
• Typeselect - ein Dropdown zum Ändern des Aufgabentyps
• Parent - ein Dropdown zur Auswahl des übergeordneten Elements einer Aufgabe
• Template - ein Container für benutzerdefinierte HTML-Inhalte
• Checkbox - ein Kontrollkästchen zum Umschalten von Optionen oder Werten
• Radio button - ein Optionsfeld zur Auswahl einer Option aus einer Gruppe
• Resources - eine Steuerung zur Zuweisung mehrerer Ressourcen zu einer Aufgabe
• Constraint - eine Steuerung zum Festlegen von Aufgabenbeschränkungen
• Baselines - eine Steuerung zur Definition von Aufgabenbaselines

var opts = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Normal' },
    { key: 3, label: 'Low' }
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority",    height:22, map_to:"priority", type:"select", options:opts},
    {name:"time",        height:72, map_to:"auto", type:"duration"}
];

Zurück nach oben