Available only in PRO Edition

Динамическая загрузка (по требованию)

Эта функциональность доступна только в PRO-версии

По умолчанию, dhtmlxGantt загружает все данные сразу, что может стать проблемой при обработке большого количества задач.

Для таких случаев вы можете переключиться на режим динамической загрузки. Этот подход позволяет загружать данные по ветвям (подпроекты) или уровням по мере взаимодействия пользователей с диаграммой и открытия определённых разделов.

Как это работает

Когда динамическая загрузка включена, функция gantt.load("url") отправляет GET-запрос на указанный URL. Ожидается, что ответ будет содержать только задачи верхнего уровня, при этом все вложенные ветви изначально будут закрыты.

Когда пользователь нажимает на значок Развернуть, диаграмма Gantt автоматически делает ещё один вызов функции gantt.load, отправляя ID нажатой задачи на сервер:

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

Сервер должен ответить подзадачами раскрытого элемента.

Событие onBeforeBranchLoading может быть использовано для изменения URL запроса или добавления дополнительных параметров.

Включение динамической загрузки

Чтобы включить динамическую загрузку в диаграмме Gantt, необходимо настроить как клиентскую, так и серверную части.

Клиентская часть (используя опцию 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");

Серверная часть:

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

На клиентской стороне отсутствует прямая информация о детях отображаемых элементов (так как они ещё не были загружены с сервера). Чтобы передать эту информацию, вы можете использовать специальное свойство данных под названием $has_child (настраиваемое с помощью gantt_branch_loading_property_config). Это свойство указывает количество дочерних элементов для задачи.

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

Формат данных для динамической загрузки

Формат данных для динамической загрузки выглядит следующим образом:

{
    "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"}
    ]
 
}

Это, по сути, та же структура JSON, которая используется для обычной загрузки данных. Для сравнения, взгляните на статью поддерживаемые форматы данных.

Ключевое отличие — свойство $has_child, которое определяет, будет ли задача отображаться как 'лиственный' элемент (без переключателя 'развернуть') или как разворачиваемый узел:

Если свойство $has_child установлено и содержит 'истинное' значение (например, ненулевое число, true или непустую строку), элемент покажет переключатель развертывания/сворачивания. Развертывание переключателя вызывает Ajax-запрос к серверу.
Если $has_child отсутствует или содержит 'ложное' значение (такие как ноль, false, NaN, undefined, пустая строка или null), элемент будет отображаться без переключателя, указывая, что у него нет дочерних задач.

Когда запрос включает параметр parent_id, ответ должен содержать детей задачи с этим ID. Если parent_id не указан, ответ должен включать задачи корневого уровня.

Действие	HTTP Метод	URL	Ответ
загрузка корневого уровня	GET	/loadUrl	Формат динамической загрузки
загрузка детей задачи	GET	/loadUrl?parent_id=id	Формат динамической загрузки

Динамическая загрузка задач

Можно настроить динамическую загрузку задач так, чтобы новые задачи загружались по мере прокрутки до последней видимой задачи. Для получения более подробной информации, ознакомьтесь со статьей Как динамически загружать задачи.

К началу