Available only in PRO Edition

Dynamisches Laden (bei Bedarf)

Diese Funktionalität ist nur in der PRO-Edition verfügbar

Standardmäßig lädt dhtmlxGantt alle Daten auf einmal, was bei einer großen Anzahl von Aufgaben problematisch werden kann.

Um solche Szenarien zu bewältigen, können Sie in den dynamischen Lademodus wechseln. Dieser Ansatz ermöglicht es, Daten Zweig für Zweig (Unterprojekte) oder Ebene für Ebene zu laden, während Benutzer mit dem Diagramm interagieren und bestimmte Abschnitte öffnen.

Wie es funktioniert

Wenn das dynamische Laden aktiviert ist, sendet die Funktion gantt.load("url") eine GET-Anfrage an die definierte URL. Die Antwort sollte nur die obersten Aufgaben enthalten, wobei alle verschachtelten Zweige zunächst als geschlossen gesetzt sind.

Wenn ein Benutzer auf das Erweiterungssymbol klickt, ruft das Gantt-Diagramm automatisch erneut die Funktion gantt.load auf und sendet die ID der angeklickten Aufgabe an den Server:

gantt.load("url?parent_id=123");

Der Server sollte dann mit den Unteraufgaben des erweiterten Elements antworten.

Das Ereignis onBeforeBranchLoading kann verwendet werden, um die Anfrage-URL zu ändern oder zusätzliche Parameter einzuschließen.

Aktivierung des dynamischen Ladens

Um das dynamische Laden im Gantt-Diagramm zu aktivieren, müssen Sie sowohl die Client- als auch die Serverseite konfigurieren.

Client-Seite (unter Verwendung der Option gantt_branch_loading_config):

gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
gantt.config.branch_loading = true;
 
gantt.init("gantt_here");
 
gantt.load("/dynamic_loading");

Server-Seite:

<?php
 
include ('config.php');
 
$gantt = new JSONGanttConnector($res, $dbtype);
 
$parent_id = isset($_GET["parent_id"]) ? $_GET["parent_id"] : 0;
 
$gantt->mix("open", 0);
$gantt->mix("deep", 1);
 
$gantt->render_links("gantt_links", "id", "source,target,type");
$gantt->render_table(
    "gantt_tasks",
    "id",
    "start_date,duration,text,progress,parent",
    "", 
    "parent"
);

Auf der Client-Seite gibt es kein direktes Wissen über die Kinder der angezeigten Elemente (da sie noch nicht vom Server geladen wurden). Um diese Information zu übermitteln, können Sie eine spezielle Dateneigenschaft namens $has_child verwenden (anpassbar mit gantt_branch_loading_property_config). Diese Eigenschaft gibt die Anzahl der Kinderelemente für eine Aufgabe an.

function check_children($row){
 global $gantt;
 $task_id = $row->get_value('id');
 $sql = "SELECT COUNT(id) AS has_children FROM gantt_tasks WHERE parent='{$task_id}'";
 $children = $gantt->sql->query($sql);
 
 $child = $gantt->sql->get_next($children);
 $children_qty = $child['has_children'];
 
 $row->set_userdata('$has_child',$children_qty);
}
$gantt->event->attach("beforeRender","check_children");

Datenformat für dynamisches Laden

Das Datenformat für dynamisches Laden sieht folgendermaßen aus:

{
    "tasks":[
    {
        "id":13,
        "start_date":"2020-04-02 00:00:00",
        "duration":10,
        "text":"Task #1",
        "progress":0.2,
        "parent":12,
        "open":0,
        "$has_child":0
    },
    {
        "id":14,
        "start_date":"2020-04-04 00:00:00",
        "duration":4,
        "text":"Task #2",
        "progress":0.9,
        "parent":12,
        "open":0,
        "$has_child":4
    }],
 
    "links":[
        {"id":1,"source":1,"target":2,"type":"0"},
        {"id":2,"source":1,"target":3,"type":"0"},
        {"id":3,"source":1,"target":4,"type":"0"}
    ]
 
}

Dies ist im Wesentlichen die gleiche JSON-Struktur, die auch für das reguläre Datenladen verwendet wird. Zum Vergleich werfen Sie einen Blick auf den Artikel über die unterstützten Datenformate.

Der Hauptunterschied ist die $has_child-Eigenschaft, die bestimmt, ob eine Aufgabe als 'Blatt'-Element (ohne 'Erweitern'-Schalter) oder als erweiterbarer Knoten erscheint:

Wenn die $has_child-Eigenschaft gesetzt ist und einen 'truthy' Wert enthält (wie eine von Null verschiedene Zahl, true oder ein nicht-leerer String), wird das Element den Erweitern/Zusammenklappen-Schalter zeigen. Das Erweitern des Schalters löst eine Ajax-Anfrage an den Server aus.
Wenn $has_child fehlt oder einen 'falsy' Wert enthält (wie Null, false, NaN, undefined, ein leerer String oder null), wird das Element ohne Schalter erscheinen, was anzeigt, dass es keine Kindaufgaben hat.

Wenn eine Anfrage den parent_id-Parameter enthält, sollte die Antwort die Kinder der Aufgabe mit dieser ID enthalten. Wenn parent_id nicht angegeben ist, sollte die Antwort Aufgaben auf Root-Ebene enthalten.

Aktion	HTTP-Methode	URL	Antwort
Root-Ebene laden	GET	/loadUrl	Format für dynamisches Laden
Kinder der Aufgabe laden	GET	/loadUrl?parent_id=id	Format für dynamisches Laden

Aufgaben dynamisch laden

Es ist möglich, das dynamische Laden von Aufgaben so einzurichten, dass neue Aufgaben geladen werden, während Sie zur letzten sichtbaren Aufgabe scrollen. Für weitere Details lesen Sie den Artikel Wie man Aufgaben dynamisch lädt.

Zurück nach oben