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

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

1. Сначала загружаются верхние родительские узлы, которые изначально свернуты (если не задано значение true свойству open).
2. Затем данные загружаются для каждого узла, когда он раскрывается.

var tree = webix.ui({
    view: "tree",
    url: "data/data_dyn.php"
});
// or
var tree = webix.ui({/* tree config */});
tree.load("data/data_dyn.php");

По умолчанию Webix ожидает данные в формате JSON. Сервер также может возвращать данные в формате XML (см. Загрузка данных в Tree).

Динамическую загрузку можно настроить тремя способами:

• задать значение true свойству webix_kids для узлов, у которых могут быть дочерние узлы
• вызвать метод loadBranch()
• задать обработчик события onDataRequest

Related sample:  Tree: Dynamic Loading

Использование флага webix_kids для динамической загрузки

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

webix.ui({
    view: "tree",
    url: "data/data_dyn.php",
    data: [
        // ниже - родительский узел 
        { id: "1", value: "Branch", webix_kids: true }
    ]
});

После того, как пользователь откроет папку, клиент отправит запрос на сервер для получения дополнительных данных, напр.:

data/data_dyn.php?continue=true&parent=1

URL в запросе основан на свойстве url компонента. Давайте подробнее остановимся на URL и его параметрах:

• parent - ID узла/папки, которая только что была открыта;
• continue - флаг, означающий, что этот запрос сгенерирован автоматически.

Если url задан, Webix отправит первоначальный запрос без параметров. Убедитесь, что скрипт для серверной стороны обработает обе ситуации:

• начальную загрузку данных (родительские узлы верхнего уровня),
• загрузку дочерних элементов указанного родительского узла.

После отправки запроса клиент будет ждать ответ (в формате JSON), который содержит дочерние элементы, напр.:

{
    parent:"1", data:[
        { id:"11", value:"Some child item 1" },
        { id:"12", value:"Some child item 2" }
    ]
}

В самих дочерних элементах также может быть свойство webix_kids.

Вы можете написать свои скрипты для динамической загрузки веток дерева.

Использование метода loadBranch()

Чтобы подгружать ветки с помощью метода loadBranch, вы можете добавить обработчик для события onBeforeOpen или onAfterOpen и вызвать метод. Предположим, что мы загрузили первоначальные данные:

webix.ui({
    view: "tree",
    data: [
        { id:1, value: "Layout Branch", webix_kids: true },
        { id:2, value: "Data Branch", webix_kids: true },
    ],
    on: {
        onBeforeOpen: function (id) {
        // если дочерние элементы еще не загружены
        if (this.getItem(id).$count === -1)
            this.loadBranch(id, null, "data/data_dyn.php");  // null означает отсутствие коллбэк-функции
        }
    }
});

Related sample:  Loading branch Data

URL нового запроса будет основан на свойстве url, которое можно переопределить с помощью метода loadBranch - "data/data__dyn.php?continue=true&parent=1". Параметры URL те же, что и описанные выше:

• parent - ID узла, который только что был открыт;
• continue - флаг, означающий, что этот запрос сгенерирован автоматически.

Если вы не меняете URL, то последний параметр у метода loadBranch() можно опустить:

var tree = webix.ui({
    view: "tree",
    url: "data/data_dyn.php",
    ...
});
 
this.loadBranch(id, null);  // "data/data_dyn.php" will be used

Убедитесь в том, что данные для ветки, которые отправил сервер - это объект со свойствами parent и data. Ответ в формате JSON должен выглядеть так:

{ parent: 1, data: [ /*...массив дочерних элементов...*/ ] }

Переопределение события onDataRequest

Задайте обработчик события onDataRequest, чтобы изменить работу динамической загрузки по умолчанию:

onDataRequest срабатывает, когда пользователь открывает узел, у которого есть свойство webix_kids:

{ id: "1", value: "Layout Branch", webix_kids: true }

Открытие узла запускает динамическую загрузку. Другими словами, если у компонента есть источник данных (заданный либо свойством url, либо методом load), то запрос посылается с использованием этого URL.

Тем не менее, событие onDataRequest дает возможность переопределить это поведение.

Предположим, что мы сначала загрузили данные одним из способов:

webix.ui({
    view: "tree",
    data: [
        { id: 1, value: "Layout Branch", webix_kids: true },
        { id: 2, value: "Data Branch", webix_kids: true },
    ],
    on: {
        onDataRequest: function (id) {
            webix.message("Getting children of " + id);
            this.parse(
                webix.ajax().get("data/data_dyn_json.php?parent="+id)
                .then(function(data){
                    return data = data.json();
                });
            );
            // отмена поведения по умолчанию
            return false;
        }
    }
});

Related sample:  Dynamic Loading: Modifying onDataRequest Event

В этом примере полностью изменена логика динамической загрузки по умолчанию.

Убедитесь в том, что данные для ветки, которые вы получаете, содержат свойства parent и data. Ответ в формате JSON должен выглядеть следующим образом:

{ parent:1, data:[/* массив дочерних элементов */]}

Статьи по теме

• Динамическая загрузка линейных данных

Наверх