Webix Tree умеет работать с данными двух типов:
Примеры работы с типами данных в древовидных структурах
Существует два способа передачи данных в Tree:
Разница между методами в том, что:
При загрузке XML данных необходимо задать значение 'xml' свойству datatype в конструкторе или передать это значение вторым параметром в parse / load.
Существует два способа загрузки данных с клиента:
Загрузка данных с клиента
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
Для загрузки данных со стороннего ресурса (локальный файл/файл на сервере) используются:
Помните, что при загрузке 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
Для загрузки из базы данных необходимо настроить конфигурацию как на клиенской части, так и на серверной.
Клиенская часть
Сделать это можно двумя способами:
Статическая загрузка из базы данных. Клиенская часть.
var tree = webix.ui({
url: "data/tree_data.php"
});
// или
tree.load("data/tree_data.php");
Серверная часть настраиваeться отдельно.
Related sample: Dynamic Loading
Наверх