Кастомные форматы данных

По умолчанию, дочерние элементы JSON объекта хранятся в его массиве data. XML записи (и родительские, и дочерние) представлены тэгом item. Любой кастомный тэг тоже будет работать при условии, что вы определите кастомный формат данных на базе уже существующего.

Логика обработки каждого из поддерживаемых форматов хранится в объекте webix.DataDriver (webix.DataDriver.json, webix.DataDriver.xml, и тд.). Вы можете заменить тэг по умолчанию одним из двух способов:

• переопределить логику существующего драйвера данных (см. Драйверы данных). Все входящие данные буду обрабатываться согласно новой логике
• скопировать объект драйвера и создать новый драйвер на его основе. В этом случае логика обработки данных будет применяться только к данным формата, указанного в datatype. Далее мы рассмотрим примеры создания кастомных тэгов.

Кастомные тэги для JSON

По умолчанию, дочерние элементы JSON объекта хранятся в его массиве data:

JSON данные с двумя уровнями вложенности

[
    { id:"1", open:true, value:"The Shawshank Redemption", data:[
        { id:"1.1", value:"Part 1" data:[
            {id:"1.1.1", value:"Page 1"},
            {id:"1.1.2", value:"Page 2"}
        ]},
        { id:"1.2", value:"Part 2" }
    ]},
    { id:"2", value:"The Godfather", data:[
        { id:"2.1", value:"Part 1" }
    ]}
]

Если же в ваших данных дочерние элементы хранятся под другим тэгом, вам необходимо:

1. Создать новый формат на базе существующего:

var myjson = webix.DataDriver.myjson = webix.copy(webix.DataDriver.json);

2. Определить статичные тэги для всех дочерних коллекций в ваших данных:

myjson.child = "parts";

Если вам необходимы разные тэги для дочерних элементов разного уровня, вы можете определить динамические тэги. Например, элементы верхнего уровня могут хранится в тэге parts, а второго – в pages.

myjson.child = function(obj){
    if (obj.$level == 1)
        return obj.parts;
    if (obj.$level == 2)
        return obj.pages;
};

Теперь компонент принимает данные следующего вида:

[
    { id:"1", open:true, value:"The Shawshank Redemption", parts:[
        { id:"1.1", value:"Part 1" pages:[
            {id:"1.1.1", value:"Page 1"},
            {id:"1.1.2", value:"Page 2"}
        ]},
        { id:"1.2", value:"Part 2" }
    ]},
    { id:"2", value:"The Godfather", parts:[
        { id:"2.1", value:"Part 1" }
    ]}
]

webix.ui({
    view:"treetable",
    datatype:"myjson" });

Related sample:  Tree: JSON Dataset

Удаление динамических тэгов

В отличие от статичных тэгов, динамические кастомные поля не удаляются из данных, т.к. названия полей изменяются. Удалить такие поля можно внутри метода child:

myjson.child = function(obj) {
    var data;
    if (obj.$level == 1) {
        data = obj.parts;
        delete obj.parts;
    }
    if (obj.$level == 2) {
        data = obj.pages;
        delete obj.pages;
    }
    return data;
}

Кастомные тэги для XML

XML данные

<data>
    <item value='The Shawshank Redemption' open='1'>
        <item value='part1'></item>
            <item>Page 15</item>
            <item>Page 16</item>
        <item value='part2'></item>
    </item>
</data>

Объявляем новый формат:

var myxml = webix.DataDriver.myxml = webix.copy(webix.DataDriver.xml);

Меняем тэги:

myxml.records = "/*/book";
 
myxml.child = function(obj){
    if (obj.$level == 1)
        return obj.part;
    if (obj.$level == 2)
        return obj.page;
}
// или, если вам необходим один тэг для всех дочерних элементов
myxml.child="part";

Новые данные:

<data>
    <book value='The Shawshank Redemption' open='1'>
        <part value='part1'>
            <page>Page 15</page>
            <page>Page 16</page>
        </part>
        <part value='part2'></part>
    </book>
</data>

webix.ui({
    view:"treetable",
    datatype:"myxml" });

Related sample:  Tree: XML Dataset

Как кастомизировать логику обработки CSV

Глобальная кастомизация

Мы можете изменить логику обработки CSV данных глобально:

webix.DataDriver.csv.cell = "\t";
webix.DataDriver.csv.row = "|";

Теперь все компоненты, которые работаю с CSV будут обрабатывать данные в соответствии с указанными правилами.

Как создать кастомный CSV формат

Кастомный формат CSV данных следует создавать в том случае, если вы будете применять его к одному или нескольким компонентам. При этом глобальная логика обработки CSV типов остаётся нетронутой.

webix.DataDriver.mycsv = webix.extend({
    row:"|",    
    cell:"-"
}, webix.DataDriver.csv);

Теперь вы можете использовать его в компонентах:

var grid = webix.ui({
    view:"datatype",
    datatype:"mycsv",
    data:'1-The Shawshank Redemption|2-The Godfather'
});
 
// или для загрузки данных в таком формате
$$('mylist').load("data.csv","mycsv");

Наверх