Available only in PRO Edition

Dynamisches Laden (bei Bedarf)

Diese Funktion 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 sein kann.

In solchen Fällen kann der Modus für dynamisches Laden verwendet werden, um Daten nach Zweigen (Teilprojekten), Ebene für Ebene, zu laden, während der Nutzer sie erweitert.

Funktionsweise

Wenn das dynamische Laden aktiviert ist, sendet der Aufruf von gantt.load("url") eine GET-Anfrage an die angegebene URL und erwartet als Antwort nur die Aufgaben der obersten Ebene, wobei alle verschachtelten Zweige zunächst geschlossen sind.

Wenn der Nutzer auf das Symbol zum Erweitern klickt, ruft gantt automatisch die Methode 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 hinzuzufügen.

Dynamisches Laden aktivieren

Um das dynamische Laden im Gantt-Diagramm zu aktivieren, sind sowohl clientseitige als auch serverseitige Konfigurationen erforderlich.

Clientseitig (verwenden Sie die Option branch_loading):

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

Serverseitig:

<?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"
);

Im Allgemeinen hat die Clientseite keine Informationen über die untergeordneten Elemente der angezeigten Daten, da diese Kinder zunächst nicht vom Server geladen werden.

Um diese Information bereitzustellen, kann eine spezielle Dateneigenschaft '$has_child' (die mit branch_loading_property angepasst werden kann) verwendet werden, um die Anzahl der Kindelemente einer Aufgabe anzugeben.

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 das dynamische 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 dasselbe JSON-Format wie beim regulären Laden von Daten; zum Vergleich siehe den Artikel Unterstützte Datenformate.

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

Wenn die $has_child-Eigenschaft vorhanden ist und einen 'truthy' Wert enthält (wie eine von Null verschiedene Zahl, true oder ein nicht-leerer String), wird das Element mit dem Ein-/Ausklappschalter angezeigt. Das Erweitern löst eine Ajax-Anfrage an den Server aus;
Wenn $has_child fehlt oder einen 'falsy' Wert enthält (wie Null, false, NaN, undefined, leerer String oder null), wird das Element ohne Schalter angezeigt, was darauf hinweist, dass es keine untergeordneten Aufgaben gibt.

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

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

Aufgaben dynamisch laden

Das dynamische Laden von Aufgaben kann auch so implementiert werden, dass neue Aufgaben geladen werden, wenn Sie zur letzten sichtbaren Aufgabe scrollen. Weitere Details finden Sie im Artikel How to load tasks dynamically.

Zurück nach oben