Форматы данных для Tree

Поддерживаемые форматы данных

JSON

[
    { "id":"1", "open":"true", "value":"Toyota", "data":[
        { "id":"1.1", "value":"Avalon" },
        { "id":"1.2", "value":"Camry" },
        { "id":"1.3", "value":"Corolla" }
    ]},
    { "id":"2", "value":"Skoda", "data":[
        { "id":"2.1", "value":"Octavia" },
        { "id":"2.2", "value":"Superb" }
    ]}
]

XML

<data>
    <item value='Toyota' open='1'>
        <item value='Avalon'></item>
        <item value='Camry'></item>
        <item value='Corolla'></item>
    </item>
    <item value='Skoda'>
        <item value='Octavia'></item>
        <item value='Superb'></item>
    </item>
</data>

Атрибуты данных

Доступны следующие атрибуты/ключи данных:

Ключ	Описание
value	значение элемента (название узла)
open	определяет состояние ветки после первой загрузки (открыта/закрыта)
css	имя CSS класса для этого элемента
checked	отмечает чекбокс элемента
intermediate	устанавливает состояние чекбокса "неопределён"
webix_kids	флаг для динамической загрузки данных у дочерних элементов

Упрощённая структура JSON данных

Структуру JSON данных можно упростить:

[
    { "value":"Toyota", "open":"true", "data":[
        "Avalon", "Camry", "Corolla"
    ]},
    { "value":"Skoda", "data":[
        "Octavia", "Superb"
    ]}
]

Related sample:  Tree: JSON Dataset

Сравните упрощённую форму и стандартную.

Пользовательский JSON формат

Чтобы использовать свои атрибуты, необходимо определить свой JSON формат (подробнее в статье: Драйверы данных).

Пример:

var myjson = webix.DataDriver.myjson = webix.copy(webix.DataDriver.json);
 
myjson.child=function(obj){
    if (obj.$level == 1)
        return obj.cars;
};
 
var tree = webix.ui({ view:"tree", datatype:"myjson", ... });

функиця 'child' определяет какие из полей объекта хранят подэлементы

В результате данные будут иметь следующий вид:

// стандартная (полная) форма
[
    { "id":"1", "open":"true", "value":"Toyota", "cars":[
        { "id":"1.1", "value":"Avalon" },
        { "id":"1.2", "value":"Camry" },
        { "id":"1.3", "value":"Corolla" }
    ]},
    { "id":"2", "value":"Skoda", "cars":[
        { "id":"2.1", "value":"Octavia" },
        { "id":"2.2", "value":"Superb" }
    ]}
]
// упрощённая форма
[
    { "value":"Toyota", "open":"true", "cars":[
        "Avalon", "Camry", "Corolla"
    ]},
    { "value":"Skoda", "cars":[
        "Octavia", "Superb"
    ]}
]

Related sample:  Tree: JSON Dataset

Пользовательский XML формат

Чтобы использовать свои тэги, необходимо определить свой XML формат (подробнее в Драйверы данных).

Пример:

var myxml = webix.DataDriver.myxml = webix.copy(webix.DataDriver.xml);
myxml.records = "/cars/car";
 
myxml.child = "model";
 
tree = webix.ui({   view:"tree", datatype:"myxml", ... });

свойсто 'records' определяет корневые тэги
свойство 'child' (может являться функцией, которая принимает объект данных в качестве параметра) определяет какие из полей объекта хранят подэлементы

В результате данные будут иметь следующий вид:

<cars>
    <car value='Toyota' open='1'>
        <model value='Avalon'></model>
        <model value='Camry'></model>
        <model value='Corolla'></model>
    </car>
    <car value='Skoda'>
        <model value='Octavia'></model>
        <model value='Superb'></model>
    </car>
</cars>

Related sample:  Tree: XML Dataset

Наверх