Elternkontrolle

Dies ist ein Auswahlfeld, das zum Ändern des Elternteils einer Aufgabe entwickelt wurde. Es lädt alle im Gantt-Diagramm sichtbaren Aufgaben, aber Sie können Filterregeln anwenden und anpassen, wie die Werte angezeigt werden. Der Rest der Funktionalität ist identisch mit der in Select Control beschriebenen.

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"parent", type:"parent", allow_root:"true", root_label:"No parent"},     {name:"time", height:72, type:"time", map_to:"auto"}
];

Related sample:  Parent selector

Initialisierung

Um die parent-Kontrolle in die Lightbox einzubinden, gehen Sie wie folgt vor:

1) Fügen Sie der Lightbox-Konfiguration einen Abschnitt hinzu:

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea",focus:true},
    {name:"parent", type:"parent", allow_root:"true", root_label:"No parent"},       {name:"time", height:72, type:"duration", map_to:"auto"}
];

2) Definieren Sie ein Label für den Abschnitt:

gantt.locale.labels["section_parent"] = "Parent task";

Related sample:  Parent selector

Eigenschaften

Hier sind einige wichtige Eigenschaften der parent-Kontrolle (eine vollständige Liste finden Sie hier):

• name - (string) der Name des Abschnitts
• height - (number) die Höhe des Abschnitts
• map_to - (string) der Name der mit dem Abschnitt verknüpften Dateneigenschaft
• type - (string) der Typ der Abschnittskontrolle
• focus - (boolean) wenn auf true gesetzt, erhält dieser Abschnitt den Fokus, wenn die Lightbox geöffnet wird
• allow_root - (boolean) wenn auf "true" gesetzt, ermöglicht eine zusätzliche Option den Benutzern, Aufgaben der Root-Ebene zuzuweisen. Funktioniert zusammen mit root_label
• root_label - (string) bietet ein Label für den Elternteil der Root-Ebene. Wird mit allow_root verwendet
• filter - (function) wendet eine Filterfunktion auf die Auswahloptionen an. Diese Funktion verwendet die Aufgaben-ID und das Aufgabenobjekt als Parameter
• sort - (function) wendet eine Sortierfunktion auf die Auswahloptionen an
• template - (function) definiert eine benutzerdefinierte Vorlage für Auswahloptionen

Optionen filtern

Um die im parent-Kontrollfeld angezeigten Optionen einzugrenzen, verwenden Sie die filter-Eigenschaft:

Filtern. Nur Aufgaben der 1. Ebene anzeigen

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"parent", type:"parent",  filter:function(id, task){         if(task.$level > 1){                     return false;             }else{              return true;         }     }},
    {name:"time", height:72, type:"time", map_to:"auto"}
];

Related sample:  Parent selector

Die filter-Eigenschaft verwendet eine Funktion, die zwei Parameter entgegennimmt:

• id - (string, number) die ID der Aufgabe
• task - (object) das Aufgabenobjekt

Die Funktion sollte zurückgeben:

• true für Aufgaben, die angezeigt werden sollen
• false für Aufgaben, die aus der Optionsliste ausgeschlossen werden sollen

Optionen sortieren

Um die Optionen im parent-Kontrollfeld zu organisieren, verwenden Sie die sort-Eigenschaft:

Aufgaben nach der Länge des Titels sortieren

function sortByLength(a,b){
    a = a.text.length();
    b = b.text.length();
    return a>b?1:(a<b?-1:0);
};
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"parent", type:"parent",  sort:sortByLength},     {name:"time", height:72, type:"time", map_to:"auto"}
];

Die sort-Eigenschaft setzt eine Funktion, die für jedes Paar benachbarter Werte aufgerufen wird. Sie sollte zurückgeben:

• 1 - der erste Wert geht vor dem zweiten
• -1 - der zweite Wert geht vor dem ersten
• 0 - keine Änderung in der Reihenfolge

Vorlage für Optionen

Um anzupassen, wie Optionen im parent-Kontrollfeld angezeigt werden, verwenden Sie die template-Eigenschaft:

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"parent", type:"parent",  template(start,end,ev){        var title = ev.id+"."+ev.text;        return title;    }},     {name:"time", height:72, type:"time", map_to:"auto"}
];

Die template-Eigenschaft definiert eine Funktion, die drei Parameter entgegennimmt:

• start - (Date) das Startdatum des Ereignisses
• end - (Date) das Enddatum des Ereignisses
• ev - (object) das Ereignisobjekt

Die Funktion gibt die benutzerdefinierte Vorlage für die im Kontrollfeld angezeigten Optionen zurück.

Zurück nach oben