Виджеты Примеры Демо Форум Сервисы
Документация
СтартГайдыЗагрузка и сохранение данных
Beginner

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

После инициализации компонента его нужно наполнить данными какого-либо из поддерживаемых форматов:

  • JSON
  • XML
  • CSV
  • JSArray
  • HTML
  • Excel
  • HTMLtable.

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

После загрузки или парсинга данных они сохраняются во внутреннем хранилище загруженных данных (DataStore или TreeStore). Свойства url и data являются лишь источником исходных данных. Читайте подробнее об этом по ссылке.

После того, как данные добавлены в компонент (путём загрузки или парсинга), их необходимо отобразить с помощью темплейтов Webix.

Идентификаторы для элементов данных

Идентификатор (или сокр. ID) - это обязательное для каждого элемента свойство. Все взаимодействия с элементом происходят через обращения к его ID.

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

webix.ui({
    view: "list",
    id: "list1",
    // локальные данные
    data: [
        {id: 1, name: "Apple", sugar: 10},
        {id: 2, name: "Banana", sugar: 12},
        {id: 3, name: "Orange", sugar: 9},
    ]
});
 
// обновляем запись с "id: 2"
$$("list1").updateItem(2, {name: "Mango"});

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

// объект с "id: 3" будет удален
$$("list1").remove(3);

В обоих случаях вы ссылаетесь на объект данных через его ID.

При указании ID необходимо соблюдать следующе требования:

  1. Во избежание конфликтов, каждый ID должен быть уникальным.
  2. Вы не можете указывать следующие значения в качестве значений для ID:
    • 0 (число)
    • null
    • false (булево значение).

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

data: [
    {
        title: "Mixta",
        id: false,  // так делать не нужно    },
    {
        title: "Moschata",    
        id: "false",  // а так можно    }
]

Обратите внимание, что если ID не указан, Webix автоматически сгенерирует и присвоит ID элементу.

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

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

1. Значение свойства url у компонента. Данные загрузятся сразу после инициализации компонента. Необходимо указать тип входящих данных (если они не в JSON формате).

{
    view:"list"
    url:"data.xml"
    datatype:"xml"
}

Свойство url может быть строкой, функцией или объектом.

2. Параметр метода load().

$$("mylist").load("data.xml");

Функция load принимает 3 параметра:

  • path (string) - путь к файлу или скрипту с данными;
  • datatype (string) - тип данных. Если это JSON, параметр можно не указывать;
  • callback (function) - коллбэк функция, если необходимо.

Метод возвращает промис.

$$('component_id').load(".../data.xml", "xml").then(function(data){
    // ваш код
});

Related sample:  Form:Loading

Метод можно вызвать при каком-либо событии на странице (при нажатии на кнопку и т.д.) или при внутреннем событии компонента.

Загрузка данных после парсинга компонента: 

webix.ui({
    view:"list",
    ready:function(){
        this.load("data/books2.xml","xml");
        this.select(this.getFirstId());
    }
});

Загрузка через прокси-объекты

Вы также можете задать усложнённый шаблон загрузки с помощью прокси-объекта. Объект передаётся в свойство url или в метод load().

У Webix есть встроенные прокси-объекты. Более детальную информацию о функциональности прокси читайте в соответствующей статье.

view:"list"
url:{
    $proxy:true,
    load: function(view,params){
        return webix.ajax("/data");
    },
    save:function(){
        // ...
    }
}

В случае слишком большого объёма данных, весьма кстати придётся динамическая загрузка, которая сначала загружает какую-то часть данных и затем подгружает остальное в процессе (например при скролле или пагинации внутри компонента).

Советуем почитать статью о серверной интеграции. В ней рассматриваются шаблоны кастомизации загрузки с сервера.

Как узказать альтернативный источник данных для связанных компонентов

Связанные компоненты позволяют загружать данные не из компонента-мастера (как ожидается), а напрямую из сервера.

{
    view:"list"
    url:"data/list.php" // источник данных по умолчанию
},
{
    view:"form",
    id:"form11",
    // ...
    dataFeed: "data/form.php" // источник данных только для формы
}
 
// форма получает данные из выбранной записи в списке
$$("form1").bind($$("list1"));

Читайте подробнее о привязке данных.

Загрузка сообщений

У компонентов есть специальные инфо-боксы для отображения какой-либо информации, например:

  • информирование пользователя о загрузке данных (в случае больших объёмов);
  • информирование пользователя об отсутствии данных для конкретного компонента.

DataTable содержат оверлей инфо-боксы с текстом или HTML контентом:

dtable.showOverLay("Loading");
dtable.hideOverlay();

Related sample:  Loading Screen

Больше информации о загрузке в datatable.

Для остальных компонентов вы можете задать Overlay Boxes и Progress Bar с помощью соответствующих модулей.

// или ключевое слово "this" если метод вызывается внутри компонента
webix.extend($$("list1"), webix.OverlayBox);
 
webix.ui({
    view:"list",
    id:"list1",
    url:"...",
    ready:function(){
        if (!this.count()){ // если нет доступных данных
            webix.extend(this, webix.OverlayBox);
            this.showOverlay("<div style='...'>Данные отсутствуют</div>");
        }
    }
});

Related sample:  Empty List

Больше информации об оверлеях и полосах прогресса

События при загрузке данных

У Webix есть несколько событий, которые помогут отследить начало и конец загрузки:

  • onBeforeLoad - срабатывает при начале загрузки XML данных;
  • onAfterLoad - срабатывает при успешной загрузке XML данных;
  • onStoreLoad - срабатывает при успешной загрузке внешних необработанных данных (вне зависимости от типа данных).
mygrid.attachEvent("onAfterLoad", function(){
    webix.message("Данные загружены");
})

Related sample:  Loading Screen

Если при загрузке возникли какие-либо проблемы, ознакомьтесь с тем, как обрабатывать ошибки при загрузке на стороне клиента.

Парсинг

В этом случае данные приходят в виде строки или массива.

Это может быть значение параметра data.

JSON массив внутри объекта DataView 

webix.ui({
    view:"dataview",
    template:"#title# Year: #year#, rank: #rank#",
    data:[
        { id:1, title:"The Shawshank Redemption", year:1994, rank:1},
        { id:2, title:"The Godfather", year:1972,  rank:2},
        { id:3, title:"The Godfather: Part II", year:1974, rank:3}
    ]
});

JSON объект хранится в заранее объявленной переменной 

var tabledata = [
    { id:1, title:"The Shawshank Redemption", year:1994, rank:1},
    { id:2, title:"The Godfather", year:1972,  rank:2},
    { id:3, title:"The Godfather: Part II", year:1974, rank:3},
    { id:3, title:"The Godfather: Part II", year:1974, rank:3}
];
 
webix.ui({
    view:"dataview",
    template:"#title# Year: #year#, rank: #rank#",
    data: tabledata
});

Переменная может быть объявлена в том же файле или во внешнем js-файле, на который вы ссылаетесь в шапке документа.

Также можно парсить данные с помощью метода parse(), который принимает data и datatype в качестве параметров.

Парсинг данных из XML строки 

webix.ui({
    view:"dataview",
    id:"dataview",
    datatype:"xml"
});
 
// функция срабатывает при каком-либо событии, например при нажатии на кнопку
 
function parse(){
   var str = "<data>
      <item id='10'><title>The Lord of the Rings</title>
      <year>2003</year><rank>10</rank></item>
      </data>";
   $$("dataview").clearAll();
   $$("dataview").parse(str,"xml");
}

Related sample:  Dataview:XML Dataset

Если вам необходим парсинг ещё одних данных, вы можете указать расположение данных, а именно индекс, из которого вы добавляете новые данные:

$$("datatable").parse({
    pos: $$("datatable").count(), // количество записей будет равно последнему индексу +1
    data:dataset
});

События при парсинге данных
  • onParse - срабатывает, когда компонент получает готовые к использованию инлайн данные
dtable.data.attachEvent("onParse", function(driver, data){
    // для json данных
    webix.message("Количество записей "+data.length);
});

Чтобы событие сработало для DataStore компонента, обработайте метод attachEvent или задайте свойство on (с префиксом data->").

Промис API при загрузке данных

В Webix интегрирована Promiz.js - библиотека для обработки результатов асинхронных действий (например загрузки данных) без использования коллбэков.

Это означает, что любой Ajax запрос возвращает промис, который можно обработать с помощью Promiz.js API.

Любой из этих методов возвращает объект промиса 

var promise = grid.load("my.php");
var promise = webix.ajax("my.php");
var promise = webix.ajax().get("my.php");
var promise = webix.ajax().post("my.php");

Дополнительно

  • Вы можете обработать результат запроса в Promiz.js без использования коллбэков:
promise.then(function(realdata){
    // если выполнен
}).fail(function(err){
    // ошибка
}).finally(function(){
    // любой результат
});
  • Вы можете запарсить результат промиса прямо в компонент:
list.parse(webix.ajax("my.php"));

Данные будут обработаны в тот момент, когда придут с сервера.

  • Вы можете извлечь пользу из свойства waitData, которым оснащён каждый компонент, и применить на нём методы Promiz.js:
// промис-подход 
grid.waitData.then(function(){
    // при наличии данных, выполнить какое-л. действие
    grid.select(grid.getFirstId());
});
  • Также, вы можете использовать событие onAfterLoad :
// стандартный подход
grid.attachEvent("onAfterLoad", function(){
    // при наличии данных, выполнить какое-л. действие
});

Читайте более подробную информацию об интеграции Webix и Promiz.js.

Наверх
© XB Software Ltd
2013-2023