Динамическая загрузка линейных данных

Вы можете подгружать линейные данные порциями:

  • Сначала загружается какая-то часть данных
  • Затем данные подгружаются при следующих операциях:
    • пользователь скроллит содержимое компонента
    • пользователь переключает страничку внутри компонента (если pager определен)
    • вызван метод loadNext.

На момент написания статьи динамическая загрузка линейных данных поддерживается следующими компонентами: DataTable, DataView и List (для List необходимо указать dynamic: true).

Настройка динамической загрузки

Чтобы включить возможность динамической загрузки, вам необходимо:

1. Указать источник данных для изначальной порции данных. Вы можете сделать это с через свойство url или же методом load:

webix.ui({
    id:"dview",
    view:"dataview",
    url:"data/data_dyn.php"
});
// или
$$("dview").load("data/data_dyn.php");

2. Опционально. Настроить загрузку с помощью следующего API:

  • datafetch - кол-во элементов данных, которое будет подгружаться при каждом запросе. 50 по умолчанию
  • datathrottle - временной промежуток в миллисекундах между последовательными вызовами. Помогает минимизировать запросы пры быстром скролле или постраничной навигации
  • loadahead - кол-во элементов данных, которые дополнительно нужно подгрузить при каждом запросе.
webix.ui({
    view:"dataview",
    datafetch:50,
    datathrottle: 500,
    loadahead:100
});

Примеры кода

Запрос на сервер

Когда пользовать начинает скроллить или переключает страничку, компонент автоматически формирует и отправляет запрос. Например, "data/data_dyn.php?continue=true&count=100&start=130", где:

  • continue - флаг, который говорит о том, что запрос сформирован автоматически
  • count - значение параметра datafetch
  • start - индекс элемента, с которого необходимо начать загрузку данных.

Обратите внимание, что вас сервер должен уметь обрабатывать эти параметры.

Ответ с сервера

Ответ с сервера должен включать следующую информацию:

  • data - массив элементов данных
  • pos - индекс элемента в компоненте, на который нужно подгрузить данные
  • total_count - общее число элементов данных, доступных на сервере.

Пример JSON ответа

{
    "data":[
        {"id":1,"package":"acx100-source"},
        {"id":2,"package":"acx200-source"}
    ],
    "pos":0,
    "total_count":999
}

Динамическая загрузка через API

Вы можете использовать метод loadNext чтобы запросить определённое кол-во данных и запарсить их в компонент. Метод принимает следующие параметры:

  • count - кол-во элементов данных для загрузки (после выполнения функции)
  • start - индекс, куда загрузить данные
  • callback - функция, которые выполнится после получения ответа с сервера. Укажите null, если вам не нужен этот параметр
  • url - URL для загрузки (если он не указан в конструкторе компонента)
  • now - boolean. Позволит проигнорировать datathrottle и начать загрузку сразу при выполнении loadNext().

Используем URL, указанный в конструкторе

webix.ui({
    id:"grida",
    view:"datatable",
    url:"data/data_dyn.php"
});
$$("grida").loadNext(10, 0);

Related sample:  Dynamic Loading with Removing the Existing Content

Передаём URL в метод

$$("gridb").loadNext(50,900,function(){
    this.showItem(903);
}, "data/data_dyn.php");

Related sample:  Setting Loading Position

Примеры использования

Метод позволяет:

  • добавить данные в конец компонента:
$$("grida").loadNext(30, pos, function(){
    this.showItemByIndex(pos);
    pos += 30;
});
 
// pos - индекс последнего элемента данных

Related sample:  Dynamic Loading with Appending Content

  • заменить существующие данные новыми (предыдущие данные необходимо очистить);
webix.ui({
    view:"datatable",
    "data->onParse":function(){
        this.clearAll();
        this.data.url = "data/data.php";
    }
});
$$("grida").loadNext(10, base);
 
// base - индекс последнего элемента данных

Related sample:  Dynamic Loading with Removing the Existing Content

События при динамической загрузке

Вы можете отловить момент перед отправкой запроса на сервер с помощью события onDataRequest.

Например, так вы можете отменить поведение по умолчанию и отправить кастомный запрос:

$$("dtable").attachEvent("onDataRequest", function(start, count){
    var data = custom_load_data(start, count);
    this.parse(data, "json");
    return false;  // возвращаем false чтобы отменить поведение по умолчанию));

Статьи по теме

Наверх