Загрузка данных в Tree

Webix Tree умеет работать с данными двух типов:

• JSON (по умолчанию)
• XML.

Примеры работы с типами данных в древовидных структурах

Существует два способа передачи данных в Tree:

• С помощью свойства объекта data;
• Используя методы parse или load.

Разница между методами в том, что:

• parse загружает данные, доступные в браузере
• load используется, когда нужно загрузить данные с удалённого сервера

Загрузка с клиенской стороны

Существует два способа загрузки данных с клиента:

• свойство data
• метод parse

Загрузка данных с клиента

var treedata = [
    { id: "1", value: "Book 1", data: [
        { id: "1.1", value: "Part 1" },
        { id: "1.2", value: "Part 2" }
    ]},
    { id: "2", value: "Book 2", data: [
        { id: "2.1", value: "Part 1" }
    ]}
];
 
var tree = webix.ui({
    view: "tree",
    data: treedata
});
 
//или
tree.parse(treedata)

Related sample:  Tree: JSON Dataset

Загрузка из внешнего ресурса

Для загрузки данных со стороннего ресурса (локальный файл/файл на сервере) используются:

• свойство url
• метод load

Помните, что при загрузке XML данных необходимо задать значение 'xml' свойству datatype

var tree = webix.ui({
    view: "tree",
    ...
    url: "data/data.xml",
    datatype: "xml"
});
//или
tree.load('data/data.xml', 'xml');

Related sample:  Tree: JSON Dataset

Загрузка данных с линейной структурой

Входные данные могут иметь линейную структуру. Древовидная структура достигается путём группировки элементов. Сделать это можно с помощью ключа $group у свойства scheme.

var tree = webix.ui({
    view: "tree",
    scheme: {
        $group: "#make#",
    },
    data: [
        { id: 1, value: "Avalon", make: "Toyota" },
        { id: 2, value: "Corolla", make: "Toyota" },
        { id: 3, value: "Camry", make: "Toyota" },
        { id: 4, value: "Octavia", make: "Skoda" },
        { id: 5, value: "Superb", make: "Skoda" }
    ]
});

Related sample:  Tree: Plain JSON Data with Client-side Grouping

Загрузка из базы данных

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

Клиенская часть

Сделать это можно двумя способами:

• указать путь свойству url
• вызвать метод load, который будет указывать на REST API.

Статическая загрузка из базы данных. Клиенская часть.

var tree = webix.ui({
    url: "data/tree_data.php"
});
// или
tree.load("data/tree_data.php");

Серверная часть настраиваeться отдельно.

Related sample:  Dynamic Loading

Наверх