Arbeiten mit Lightbox-Elementen

Abrufen und Festlegen des Kontrollwerts

Sie können den Wert eines Lightbox-Steuerungselements mit der Methode gantt.getLightboxSection abrufen oder aktualisieren. So geht's:

// Um den Wert abzurufen
var value = gantt.getLightboxSection('description').getValue();
 
// Um den Wert festzulegen
gantt.getLightboxSection('description').setValue('abc');

Überprüfen, ob die Lightbox geöffnet ist

Um festzustellen, ob die Lightbox derzeit geöffnet ist, können Sie die lightbox-Eigenschaft im Statusobjekt überprüfen, das von der Methode gantt.getState zurückgegeben wird. Wenn die Lightbox geöffnet ist, wird die ID der geöffneten Aufgabe zurückgegeben; andernfalls wird null oder undefined zurückgegeben.

if (gantt.getState().lightbox){
    // Code für den Fall, dass die Lightbox geöffnet ist
} else {
    // Code für den Fall, dass die Lightbox geschlossen ist
}

Zuordnung von Daten-Eigenschaften zu Lightbox-Abschnitten

Um eine Daten-Eigenschaft einem bestimmten Lightbox-Abschnitt zuzuordnen, verwenden Sie das Attribut map_to im Abschnittsobjekt:

// Weist den "holders"-Abschnitt einer Daten-Eigenschaft namens "holder" zu
gantt.config.lightbox.sections = [
    {name:"description", height:38, type:"textarea", map_to:"text", focus:true},
    {name:"holders", height:22, type:"textarea", map_to:"holder"},
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

Festlegen von Standardwerten für Lightbox-Steuerelemente

Sie können Standardwerte für Lightbox-Abschnitte mit der Eigenschaft default_value im Abschnittsobjekt festlegen. Wenn Sie zum Beispiel einen benutzerdefinierten "Priority"-Abschnitt zur Lightbox hinzugefügt haben, um die Priorität einer Aufgabe anzuzeigen, können Sie "Low" als Standardwert wie folgt festlegen:

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

Wenn Sie einen Standardwert direkt für neue Ereignisse festlegen möchten, können Sie das onTaskCreated-Event verwenden:

gantt.attachEvent("onTaskCreated", function(id, task){
    task.priority = "Low";
    return true;
});

Ausblenden eines Abschnitts für bestimmte Ereignisse

Um einen Abschnitt für bestimmte Ereignisse auszublenden, können Sie seine set_value-Methode neu definieren. Hier ist ein Beispiel:

gantt.form_blocks.textarea.set_value = function(node, value, ev){
    node.firstChild.value = value || "";
    var style = ev.some_property ? "" : "none";
    node.style.display = style; // Bearbeitungsbereich
    node.previousSibling.style.display = style; // Abschnittsüberschrift
    gantt.resizeLightbox(); // Größe der Lightbox anpassen
}

Platzieren eines Abschnitts und seines Labels in einer Zeile

Sie können Abschnitte der Lightbox mit ihren Labels in einer Zeile ausrichten, indem Sie die Option gantt.config.wide_form auf true setzen:

gantt.config.wide_form = true;
 
gantt.locale.labels.section_priority = "Priority";
gantt.locale.labels.section_status = "Status";
 
gantt.config.lightbox.sections = [
    {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
    {name: "status", height:22, map_to: "status", type: "select", options: [         
        {key:1, label: "New"},                                                       
        {key:2, label: "Open"},                                                     
        {key:3, label: "Done"}                                                      
    ]},                                                                            
    {name: "priority", map_to: "priority", type: "radio", options: [
        {key: 1, label: "High"},
        {key: 2, label: "Normal"},
        {key: 3, label: "Low"},
    ]},
    {name: "time", type: "duration", map_to: "auto"}
];
 
gantt.init("gantt_here");

Related sample:  Aligning Lightbox

Hinzufügen eines Buttons zur Abschnittsüberschrift

Sie können einen benutzerdefinierten Button in die Überschrift eines Abschnitts einfügen. Gehen Sie dazu folgendermaßen vor:

1. Fügen Sie die Eigenschaft button zum Abschnittsobjekt hinzu:

{name:"description", height:130, map_to:"text", type:"textarea", button:"help"}

1. Definieren Sie das Label für den Button:

//'help' ist der Wert der 'button'-Eigenschaft
gantt.locale.labels.button_help = "Help label";

1. Legen Sie den Klick-Handler für den Button fest:

gantt.form_blocks.textarea.button_click = function(index, button, shead, sbody){
    // Ihre benutzerdefinierte Logik hier
}

Hier sind die Parameter für den Handler:

• index - (number) Der nullbasierte Index des Abschnitts.
• button - (HTMLElement) Das HTML-Element für den Button.
• shead - (HTMLElement) Das HTML-Element für die Abschnittsüberschrift.
• sbody - (HTMLElement) Das HTML-Element für den Abschnittskörper.

Sie können das Aussehen des Buttons auch mit einer CSS-Klasse anpassen:

.dhx_custom_button_help {
    background-image: url(imgs/but_help.gif);
}

Zurück nach oben