Benutzerdefiniertes Lightbox

Erstellen eines benutzerdefinierten Lightbox

Sie können das Standard-Lightbox in Gantt durch eine vollständig angepasste Version ersetzen. Es gibt zwei Hauptansätze, um dies zu erreichen:

1) Neudefinieren der Methode gantt.showLightbox:

gantt.showLightbox = function(id){
    // Benutzerdefinierter Formularcode hier
}

• id - (string/number) - repräsentiert die Aufgaben-ID.

Um bei der Implementierung des benutzerdefinierten Lightbox zu helfen, können Sie auch die Methode gantt.hideLightbox verwenden.

Beginnen Sie mit dem Erstellen eines HTML-Containers, wie "my-form", der das benutzerdefinierte Lightbox enthält:

<div id="my-form">
 <label for="description">Aufgabentext
  <input type="text" name="description" value="" >
 </label>
 <br>
 <input type="button" name="save" value="Speichern">
 <input type="button" name="close" value="Schließen">
 <input type="button" name="delete" value="Löschen">
</div>

Nun können Sie das benutzerdefinierte Lightbox mit einer Konfiguration wie dieser einrichten:

var taskId = null;
 
gantt.showLightbox = function(id) {
    taskId = id;
    var task = gantt.getTask(id);
 
    var form = getForm();
    var input = form.querySelector("[name='description']");
    input.focus();
    input.value = task.text;
 
    form.style.display = "block";
 
    form.querySelector("[name='save']").onclick = save;
    form.querySelector("[name='close']").onclick = cancel;
    form.querySelector("[name='delete']").onclick = remove;
};
 
gantt.hideLightbox = function(){
    getForm().style.display = "";
    taskId = null;
}
 
function getForm() {
    return document.getElementById("my-form");
};
 
function save() {
    var task = gantt.getTask(taskId);
 
    task.text = getForm().querySelector("[name='description']").value;
 
    if(task.$new){
        delete task.$new;
        gantt.addTask(task,task.parent);
    }else{
        gantt.updateTask(task.id);
    }
 
    gantt.hideLightbox();
}
 
function cancel() {
    var task = gantt.getTask(taskId);
 
    if(task.$new)
        gantt.deleteTask(task.id);
    gantt.hideLightbox();
}
 
function remove() {
    gantt.deleteTask(taskId);
    gantt.hideLightbox();
}

2) Verwenden des onBeforeLightbox-Ereignisses. Diese Methode beinhaltet:

• Erkennen, wann das Lightbox angezeigt werden soll.
• Verhindern, dass das Standard-Lightbox angezeigt wird.
• Anzeigen eines benutzerdefinierten Formulars und Ausfüllen mit den Aufgabendaten.

Hier ist ein Beispiel:

gantt.attachEvent("onBeforeLightbox", function(id) {
    var task = gantt.getTask(id);
    if(task.$new){
        dhtmlx.confirm({
            text:"Aufgabe erstellen?",
            callback: function(res){
                if(res){
                    // Werte anwenden
                    delete task.$new;
                    gantt.addTask(task);
                }else{
                    gantt.deleteTask(task.id);
                }
            }
        });
        return false;
    }
    return true;
});

Verarbeiten von Aktionen im benutzerdefinierten Formular

Wenn der Benutzer mit dem benutzerdefinierten Formular interagiert, müssen Sie die Formularwerte manuell abrufen und die entsprechende Aufgabe mit APIs wie gantt.addTask, gantt.updateTask und gantt.deleteTask aktualisieren.

Bei neuen Aufgaben (erstellt durch Klicken auf die 'Plus'-Taste) enthält das Aufgabenobjekt eine $new-Eigenschaft. Wenn der Benutzer die Erstellung abbricht, sollte die Aufgabe entfernt werden.

Sie können die Aktionen zum Schließen des Lightbox wie unten gezeigt verwalten. Die Art der Aktion—'save', 'cancel' oder 'delete'—wird als action-Parameter übergeben:

switch(action){
   case "save":
      task.text = ''; // Formularwerte anwenden
 
      // Eine neue Aufgabe hinzufügen oder eine bestehende aktualisieren
      if(task.$new){
        delete task.$new;
        gantt.addTask(task,task.parent)
      }else{
        gantt.updateTask(id);
      }
 
      break;
   case "cancel":
      // Wenn eine neue Aufgabe abgebrochen wird, löschen; andernfalls nichts tun
      if(task.$new)
         gantt.deleteTask(id);
      break;
   case "delete":
      gantt.deleteTask(id);
      break;
}

Zurück nach oben