Хранилища данных

Библиотека Webix содержит несколько неотображаемых компонентов. У них нет графического представления, а используются они для хранения данных.

DataCollection - хранит линейную коллекцию данных (например, list, dataview, datatable и другие.)
TreeCollection - хранит иерархическую коллекцию данных (например, tree и treetable)
DataValue - хранит одно значение (например, text, button, label и другие.)
DataRecord - хранит одну запись (например, form и htmlform).

Ниже вы найдёте примеры использования коллекций данных.

Использование DataCollection и TreeCollection

DataCollection и TreeCollection позволяют хранить данные в одном месте и при необходимости отображать их в желаемом компоненте(ах). Коллекции часто используются при связывании и синхронизации данных.

// коллекции могут загружать серверные данные
var dataCollection = new webix.DataCollection({
  url:"//docs.webix.com/samples/server/films",
});
 
var treeCollection = new webix.TreeCollection({
// коллекции могут загружать локальные данные
  data:cars
});
 
 
$$("list1").sync(dataCollection);
$$("tree1").sync(treeCollection);
 
$$("form1").bind(dataCollection);

Коллекции используют тот же API, что и их "видимые" аналоги. Обратите внимание, что в случае синхронизации с коллекцией, вам необходимо вызывать методы непосредственно для коллекции, а не для синхронизированного с ней компонента.

Интеграция хранилищ с сервером

DataCollection может загружать данные с сервера и сохранять их обратно на сервер. Компоненты, которые синхронизированы с коллекциями, отображают данные и позволяют их редактировать.

1. Определите DataCollection и передайте в неё данные с сервера:

var store = new webix.DataCollection({
    url:"server/data"
});

2. Вы можете указать URL для сохранения данных. Любые изменения в коллекции будут отправлены по указанному URL:

var store = new webix.DataCollection({
    url:"server/data",
    save:"server/data",
});

Обратите внимание, что свойство save автоматически инициализирует DataProcessor для коллекции. Если вам необходимо настроить DataProcessor (например, указать функцию для экранирования, имя операции и другое), вы можете указать эти настройки в конструкторе DataProcessor:

var dp = new webix.DataProcessor({
// points to the linked collection
    master: store,
    url: "server/data"
});

3. Синхронизируйте компонент с DataCollection:

list.sync(store);

Подробнее о работе с сервером читайте в разделе Загрузка и сохранение данных.

Наверх