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

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

  1. JSON (по умолчанию);
  2. XML.

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

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

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

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

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

При загрузке XML данных необходимо задать значение 'xml' свойству datatype в конструкторе или передать это значение вторым параметром в parse / load.

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

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

  1. свойство data
  2. метод 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

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

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

  1. свойство url
  2. метод 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

Наверх