По умолчанию Webix загружает данные в компонент с помощью асинхронного Get-запроса. Однако также допускаются различные модификации.
Вы можете изменить тип запроса на POST:
webix.ui({
view:"datatable",
// ..конфиг
url: "post->load.php"
});
Вы можете определить запрос как синхронный (иногда это может быть полезным).
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.
Вы можете отслеживвать событие onBeforeAjax и изменять любой AJAX запрос на странице (так что будьте внимательны):
Отправка заголовков
webix.attachEvent("onBeforeAjax",
function(mode, url, data, request, headers, files, promise){
headers["Content-type"] = "application/json";
}
);
Обратите внимание, что у модуля 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;
});
}
});
Вы также можете изменить данные позже, когда они загружены на клиент, но не попали в сам компонент. Используйте Драйверы данных для этих целей.
Динамическая загрузка используется при загрузке больших объёмов данных. Кастомизация динамической загрузки разнится, т.к. контролировать этот процесс напрямую невозможно. Мы предлагаем два варианта кастомизации.
При загрузке новых данных в компонент, вы можете заблокировать поведение по умолчанию и создать свой запрос с помощью события 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 и pos, код отсылает номер страницы (стартовая позиция делённая на размер страницы).
Для Tree и Treetable это параметр id - ID родительской ветки.
Вы можеет создать прокси, который будет работать как среднее звено между компонентом и сервером.
Более подробную информацию читайте в соответствующем разделе.