Advanced

Драйверы данных

У Webix есть специальный миксин DataDriver, который упрощает загрузку данных не в JSON формате. У миксина есть набор встроенных методов для форматов json, xml, html, csv, jsarray, excel (доступен в Webix Pro), а также для htmltable. Методы конвертируют данные любого из вышеперечисленных форматов в JSON, чтобы компоненты могли без проблем работать с этими данными.

Возможности драйвера

Вы можете:

настраивать обработку данных при парсинге
использовать методы для работы с драйверами
создать кастомный драйвер под определённый формат с нуля или на базе уже существующего.

Настройка драйвера

XML

В случае XML вы можете переопределять следующие свойства:

Элемент Тип Код

data tag

xpath

Элемент	Тип	Код
data tag	xpath	`webix.DataDriver.xml .records="/*/item";`
configuration tag	xpath	`webix.DataDriver.xml .config="/*/config";`
child tag	tag name	`webix.DataDriver.xml.child="item";`

webix.DataDriver.xml
.records="/*/item";

configuration tag

xpath

webix.DataDriver.xml
.config="/*/config";

child tag

tag name

webix.DataDriver.xml.child="item";

Например, чтобы предупредить обработчик данных об XML данных, добавьте следующие строки в ваш код:

webix.DataDriver.xml.records = "/*/book";
webix.DataDriver.xml.child = "part";

Строки выше переопределят логику драйвера для всех XML данных. Если же вы хотите разделить кастомную логику и логику по умолчанию, вам необходимо создать кастомный обработчик XML данных на базе встроенного.

var myxml = webix.DataDriver.myxml = webix.copy(webix.DataDriver.xml);
myxml.records = "/*/book";
myxml.child = "part";

Related sample: Tree: XML Dataset

Дочерние тэги можно указать с помощью функции:

var myxml2 = webix.DataDriver.myxml2 = webix.copy(webix.DataDriver.xml);
myxml2.records = "/*/book";
myxml2.child = function(obj){
    if (obj.$level == 1)
        return obj.part;
    if (obj.$level == 2)
        return obj.page;
}

Related sample: Tree: XML Dataset

CSV

Вы можете указывать разделители для рядов и ячеек:

webix.DataDriver.csv.row = "\n";
webix.DataDriver.csv.cell = ",";

Строки выше переопределяют обработку всех CVS данных приложения. Вы также можете создать кастомный CSV формат, чтобы избежать глобального переопределения:

var mycsv = webix.DataDriver.mycsv = webix.copy(webix.DataDriver.csv);
csv.row = "\n";
csv.cell = ",";

HTML

Вы можете определить HTML тэг, который будет обрабатываться драйвером, как тэг с данными:

webix.DataDriver.html.tag = "LI";

Строка выше переопределяет обработку всех HTML данных приложения. Вы также можете создать кастомный HTML формат, чтобы избежать глобального переопределения:

var myhtml = webix.DataDriver.myhtml = webix.copy(webix.DataDriver.html);
html.tag = "LI";

JSON

Вы можете определить, какое свойство объекта будет хранить дочерние элементы (используется для иерархических данных, напр., в компонентах tree, treegrid, grouplist, и др.):

webix.DataDriver.json.child = "data";

Строка выше переопределяет обработку всех JSON данных приложения. Вы также можете создать кастомный JSON формат, чтобы избежать глобального переопределения:

var myjson = webix.DataDriver.json = webix.copy(webix.DataDriver.json);
myjson.child = "data";

Тэг для дочерних элементов (зд. child) можно указать в виде функции. Удобно, когда вы хотите создать разные тэги для дочерних элементов разного уровня вложенности.

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

Любая кастомная дочерняя коллекция конвертируется в "data", а поля дочернего элемента удаляются из элемента данных при парсинге.

В отличии от статичных тэгов, динамические поля не удаляются из элементов данных, т.к. названия полей изменяются. Если вам нужно удалить поля, опишите соответствующую логику в методе 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;
}

Методы драйвера

У всех драйверов есть следующие методы:

// конвертирует строку в объект
var data = driver.toObject(data);
 
// возвращает массив записей данных
var records = driver.getRecords(data);
 
// возвращает объект данных записи
var data = driver.getDetails(records[0]);

Методы для XML драйвера

// возвращает xpath
var elements = driver.xpath("/some/xpath", data);
 
// конвертирует xml тэг в json объект
var obj = driver.tagToObject(elements[0]);
 
// конвертирует строку в JS типы, числа и булевы значения
obj = driver.assignTypes(obj);

Как создать кастомный драйвер

Вы можете создать драйвер для обработки кастомных типов данных:

Структура драйвера следующая:

webix.DataDriver.driverName={ // driverName - название типа 
    toObject:function(text,xml){
        // ...
        return text; 
    },
    getRecords:function(data){ 
        var result = [];
        // ...
        return result;
    },
    getDetails:function(data){
        var result = {}
        // ... 
        return result;
    },
    getInfo:function(data){
        return { 
           size:0, 
           from:0 
        };
    }
};

Структуру существующих драйверов можно посмотреть в исходном коде Webix (/sources/load/drivers/driver_name.js).

Предположим, у нас есть данные кастомного типа. Первое, что вам необходимо сделать - конвертировать данные в объект-прослойку. Такой объект будет использоваться в других методах драйвера.

Первым делом определите метод toObject(text, xml). Метод вызывается после загрузки или же напрямую с помощью другого метода - parse и возвращает объект-прослойку:

text - входные данные
xml - xml объект (для xml данных. В остальных случаях это необязательный параметр).

Сформируйте объект записей, используя данные из объекта-прослойки с помощью метода getRecords(data). Метод принимает 1 параметр:

data - объект-прослойка.

После того, как вы сформировали массив записей, необходимо определить набор свойств для каждой отдельной записи с помощью метода getDetails(data). Метод принимает 1 параметр:

data - элемент массива.

Последний шаг релевантен в случае динамической загрузки данных. Метод getInfo(data) возвращает общее кол-во данных и позицию, на которую добавляются новые данные. Метод принимает 1 параметр:

data - объект-прослойка.

Метод возвращает объект со следующими полями:

size - общее кол-во данных или 0, если динамическая загрузка отключена или невозможна
from - индекс текущего последнего элемента или 0, если динамическая загрузка отключена или невозможна.

Драйверы JSON и XML данных добавляют дополнительные свойства в возвращаемый объект:

parent - индекс корневой ветки
config - объект конфигурации (загружается вместе с данными)
key - ключ безопасности (webix_security).

С помощью этих четырёх, или даже трёх шагов, вы можете определить кастомный тип данных и использовать его при разработке.

Как создать драйвер на базе существующего

Иногда бывает необходимо изменить логику обработки какого-либо из уже существующих драйверов.

Это можно сделать с помощью метода кастомизации компонента, которая позволяет расширить любой JSON объект:

webix.DataDriver.custom = webix.extend({
    records:"/data/items/item",
    getDetails:function(obj){
        var res = {};
        var cells = this.xpath(obj, "cell");
        for (var i = 0; i < cells.length; i++)
            res[cells[i].getAttribute("id")] = this.nodeValue(cells[i]);
        return res;
    }
}, webix.DataDriver.xml);

Related sample: Loading from Custom XML

Наверх