Hinzufügen/Aktualisieren/Löschen von Links

Dieser Abschnitt erklärt, wie grundlegende Aktionen mit Abhängigkeitslinks durchgeführt werden, wie das Erstellen, Aktualisieren oder Entfernen von Links sowie das dynamische Ändern ihrer Eigenschaften.

Hinzufügen eines neuen Links

Um einen neuen Link im Gantt-Diagramm zu erstellen, kann die Methode gantt.addLink wie unten gezeigt verwendet werden:

var linkId = gantt.addLink({
    id:1,
    source:1,
    target:2,
    type:"1"
});

Aktualisieren einer Link-Eigenschaft

Um die Eigenschaft eines Links dynamisch zu aktualisieren, steht die Methode gantt.refreshLink zur Verfügung:

var links= gantt.config.links;
var link = gantt.getLink(1);//->{id:1,source:1, target:2, type:"1"}
 
if (link.type == links.finish_to_start){     link.type = links.finish_to_finish;     gantt.refreshLink(1);  }

Wenn alle Links im Gantt-Diagramm gleichzeitig aktualisiert werden müssen, kann die Methode gantt.refreshData verwendet werden:

var links= gantt.config.links;
 
var link1 = gantt.getLink(1);//->{id:1,source:1, target:2, type:"1"}
var link2 = gantt.getLink(2);//->{id:2,source:4, target:5, type:"0"}
 
if (link1.type == links.finish_to_finish){     gantt.refreshData() }

Löschen eines Links

Um einen bestimmten Link zu entfernen, wird die Methode gantt.deleteLink verwendet:

gantt.deleteLink(linkId);

Entfernen aller Links aus dem Gantt-Diagramm

Um das Gantt-Diagramm von allen Aufgaben und Links zu befreien, kann die Methode gantt.clearAll genutzt werden:

gantt.clearAll();

Bearbeiten von Link-Werten aus der Benutzeroberfläche

Es gibt keine integrierte Benutzeroberfläche zum Bearbeiten von Link-Eigenschaften wie Verzögerungen. Falls erforderlich, muss diese Funktionalität manuell implementiert werden. Ein üblicher Ansatz umfasst die folgenden Schritte:

• Erfassen des onLinkDblClick-Ereignisses.
• Abbrechen des Standardverhaltens.
• Anzeigen eines benutzerdefinierten Popups aus dem Ereignishandler.

Für den letzten Schritt können Sie entweder integrierte Popups verwenden oder eine benutzerdefinierte Lösung erstellen. Unten finden Sie ein Beispiel, wie ein Popup zum Bearbeiten von Verzögerungen implementiert werden kann:

(function(){
    var modal;
    var editLinkId;
 
    function endPopup(){
        modal = null;
        editLinkId = null;
    }
    function cancelEditLink(){
        endPopup();
    }
 
    function deleteLink(){
        gantt.deleteLink(editLinkId);
        endPopup();
    }
 
    function saveLink(){
        var link = gantt.getLink(editLinkId);
 
        var lagValue = modal.querySelector(".lag-input").value;
        if(!isNaN(parseInt(lagValue, 10))){
            link.lag = parseInt(lagValue, 10);
        }
 
        gantt.updateLink(link.id);
        if(gantt.autoSchedule){
            gantt.autoSchedule(link.source);
        }
        endPopup();
    }
    gantt.attachEvent("onLinkDblClick", function(id,e){
        editLinkId = id;
        var link = gantt.getLink(id);
        var linkTitle = gantt.getTask(link.source).text + " -> " + 
            gantt.getTask(link.target).text;
 
        modal = gantt.modalbox({
            title: linkTitle,
            text: "<div>" +
                    "<label>Lag <input type='number' class='lag-input' /></label>" +
                "</div>",
            buttons: [
                {label:"Save", value:"save"},
                {label:"Cancel", value:"cancel"},
                {label:"Delete", value:"delete"}
            ],
            width: "500px",
            callback: function(result){
                switch(result){
                    case "save":
                        saveLink();
                        break;
                    case "cancel":
                        cancelEditLink();
                        break;
 
                    case "delete":
                        deleteLink();
                        break;
                }
            }
        });
 
        modal.querySelector(".lag-input").value = link.lag || 0;
 
        return false;
    });
})();

Related sample:   Edit-lag Popup

Zurück nach oben