Aufgaben neu anordnen

dhtmlxGantt bietet zwei Methoden zum Umordnen von Aufgaben im Raster:

Drag-and-Drop.
Sortierung (siehe die Details).

Diese Methoden sind Alternativen, und standardmäßig ist keine von ihnen aktiv.

Um die Neuanordnung per Drag-and-Drop zu aktivieren, können Sie die Option gantt.config.order_branch verwenden:

gantt.config.order_branch = true;
gantt.init("gantt_here");

Related sample: Branch ordering

Es gibt auch eine Videoanleitung, die zeigt, wie man Aufgaben im Raster sortiert und neu anordnet.

Drag-and-Drop über die gesamte Gantt-Struktur hinweg

Die Option gantt.config.order_branch ermöglicht das Ziehen von Aufgaben innerhalb derselben Baumebene.

Wenn Sie Aufgaben über alle Baumebenen hinweg neu anordnen möchten, können Sie einen Modus aktivieren, der es ermöglicht, dass Aufgaben unabhängig von ihrer Ebene andere ersetzen. Verwenden Sie hierfür die Option gantt.config.order_branch_free:

// Aufgaben über alle Ebenen im Gantt neu anordnen
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");

Einschränkung der Ablagepositionen

Um zu verhindern, dass Aufgaben in bestimmten Positionen abgelegt werden, können Sie die Ereignisse onBeforeTaskMove oder onBeforeRowDragEnd verwenden:

// Verhindern, dass Aufgaben in einen anderen Unterzweig verschoben werden
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
 
// Alternativ
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

Optimierung der Leistung für große Datensätze

Wenn Ihr Gantt-Diagramm viele Aufgaben enthält, kann der Standardmodus zur Neuordnung von Zweigen die Leistung beeinträchtigen. Um die Geschwindigkeit zu verbessern, können Sie in den "Marker"-Modus wechseln:

gantt.config.order_branch = "marker";

In diesem Modus wird nur der Name der Aufgabe während des Ziehens verschoben, und das Gantt-Diagramm wird nur aktualisiert, wenn die Aufgabe abgelegt wird. Ereignisse wie onBeforeTaskMove und onAfterTaskMove werden während dieses Vorgangs nicht ausgelöst.

Um das Ablegen von Aufgaben in bestimmten Positionen in diesem Modus einzuschränken, können Sie stattdessen das Ereignis onBeforeRowDragMove verwenden.

Hervorheben gültiger Ablageziele während Drag-and-Drop

Wenn Sie während des Ziehens gültige Ablageziele visuell anzeigen möchten (z.B. um zu zeigen, dass ein Wurzelknoten nicht unter einem anderen Wurzelknoten gezogen werden kann), können Sie die Ereignisse onRowDragStart und onRowDragEnd verwenden:

gantt.config.order_branch = true; // Beschränkung der Aufgabenanordnung innerhalb eines Zweigs
gantt.init("gantt_here");
gantt.parse(demo_tasks);
 
var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {
    drag_id = id;
    return true;
});
gantt.attachEvent("onRowDragEnd", function(id, target) {
    drag_id = null;
    gantt.render();
});
 
gantt.templates.grid_row_class = function(start, end, task){
    if(drag_id && task.id != drag_id){
        if(task.$level != gantt.getTask(drag_id).$level)
            return "cant-drop";
        }
    return "";
};

Vertikales Neuanordnen von Aufgaben in der Zeitleiste

Für weitere Details zum vertikalen Neuanordnen von Aufgaben in der Zeitleiste verweisen wir auf die Beispiele im Abschnitt Wie man Aufgaben in der Zeitleiste vertikal neu anordnet.

Zurück nach oben