Intermediate

Как изменить логику загрузки данных с помощью AJAX

По умолчанию Webix загружает данные в компонент с помощью асинхронного Get-запроса. Однако также допускаются различные модификации.

Загрузка данных черех POST-запрос

Вы можете изменить тип запроса на POST:

webix.ui({
    view:"datatable",
    // ..конфиг
    url: "post->load.php"
});

Загрузка данных через синхронный AJAX запрос

Вы можете определить запрос как синхронный (иногда это может быть полезным).

webix.ui({
    view:"datatable",
    autoConfig:true,
    url:function(params){
        // данные, которые получили синхронным запросом, можно загрузить в компонент методом parse
        var data = webix.ajax().sync().get("/samples/server/packages").responseText;
        this.parse(data);
    }
});

this указывает на компонент данных. В этом случае на datatable.

Изменения в фоновых AJAX запросах

Вы можете отслеживвать событие onBeforeAjax и изменять любой AJAX запрос на странице (так что будьте внимательны):

Отправка заголовков

webix.attachEvent("onBeforeAjax", 
    function(mode, url, data, request, headers, files, promise){
        headers["Content-type"] = "application/json";
    }
);

Обратите внимание, что у модуля AJAX (описан ниже) есть встроенная функциональность для отправки заголовков вместе с запросами на сервер

Загрузка с помощью хелпера Webix AJAX

Чтобы загружать данные по требованию и при этом не нарушать работу приложения, можно прибегнуть к Webix AJAX интерфейсу.

Любой асинхронный Webix AJAX запрос сразу же возвращает промис. Когда промис выполнен, метод then() получает данные. Эти данные можно загрузить в компонент, получив JSON для загрузки помощью метода json():

webix.ajax("data/load.php").then(function(data){
    $$("list").parse(data.json());
});

Вы также можете поручить ожидание промиса Webix и затем лишь обработать данные для компонента:

var data = webix.ajax("data/load.php");
$$("list").parse(data);

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

var id = $$("list").getSelectedId();
webix.ajax("server/load.php?id="+id).then(function(data){
    $$("grid").parse(data.json());
});

Предварительная обработка данных

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

Предположим, мы получили такие данные:

{
    "x1":{ name:"Alex" },
    "x2":{ name:"Dan" }
}

но для компонента нужен такой формат

[
    { id:"x1", name:"Alex"},
    { id:"x2", name:"Dan" }
]

Вы можете изменить данные внутри метода then(). В сниппете ниже JSON данные приходят в ответе, а затем объект данных пересобирается и загружается в компонент:

var data = webix.ajax("data/load.php").then(function(data){
    var js = data.json();
    var new_js = [];
 
    for (key in js){
        new_js.push({
            id:key, 
            name:js[key].name
        });
    };
 
    return new_js;
});
 
$$("list").parse(data);

Эта техника позволяет настроить UI и обработать данные отдельно друг от друга. Вы можете совместить эти два процесса. В сниппете ниже свойство url получает своё значение динамически, а данные загружаются в компонента во время инициализации UI.

webix.ui({
    view:"datatable",
    autoConfig:true,
    url:function(details){
        return webix.ajax("data.php").then(function(data){
            var js = data.json();
            var new_js = [];
 
            for (key in js){
                new_js.push({
                    id:key, 
                    name:js[key].name
                });
            };
 
            return new_js;
        });
    }
});

Вы также можете изменить данные позже, когда они загружены на клиент, но не попали в сам компонент. Используйте Data Drivers для этих целей.

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

Динамическая загрузка используется при загрузке больших объёмов данных. Кастомизация динамической загрузки разнится, т.к. контролировать этот процесс напрямую невозможно. Мы предлагаем два варианта кастомизации.

Событие onDataRequest

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

// onDataRequest
grid.attachEvent("onDataRequest", function(start, count){
    this.parse(
        webix.ajax().get("/server/projects?parent="+id).then(function(data){
            return data = data.json();
        });
    );
    return false;
});

Related sample:  Tree: Dynamic Loading with onDataRequest Event

Коллбэк функция у каждого компонента своя. У Datatable функция принимает следующие параметры:

  • start - позиция с которой загружаются новые данные;
  • count - количество записей, которые будут загружены.

В сниппете выше вместо отправки параметров start и pos, код отсылает номер страницы (стартовая позиция делённая на размер страницы).

Для Tree и Treetable это параметр id - ID родительской ветки.

Использование прокси

Вы можеет создать прокси, который будет работать как среднее звено между компонентом и сервером.

Более подробную информацию читайте в соответствующем разделе.

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

Наверх