В свойство компонента url, а также в его функцию load можно передать дополнительную логику загрузки данных.
Подразумевается, что все примеры запросов в этой статье осуществляются с помощью модуля webix.ajax. Более подробную информацию читайте в статье о операциях AJAX и webix.ajax API.
Существуют несколько готовых Webix прокси, которые можно использовать, добавив префиксы к скрипту для загрузки.
Чтобы использовать прокси, определите его одним из следующих способов:
// прокси для загрузки
webix.ui({
view:"datatable", id:"grid",
url:"binary->file.pdf"
});
$$("grid").load("binary->file.pdf");
// прокси для сохранения
webix.ui({
view:"list"
url:"load.php",
save:"rest->load.php"
});
var myProxy = webix.proxy("binary", "load.php");
webix.ui({
view:"list"
url: myProxy
});
У прокси есть несколько методов, которые можно вызвать автоматически:
Более подробную информацию об этих методах читайте здесь.
У всех встроенных прокси есть хотя бы один из них: load() или save(), в зависимости от назначения прокси. Эти методы вызываются библиотекой при загрузке или сохранении соответственно. Однако, вы также можете вызвать их с помощью API одним из следующих способов:
$$("grid").config.url.load(view, params);
var binary = webix.proxy("binary", "server/datatable.php");
webix.ui({
view:"datatable",
autoConfig:true,
url:binary
});
binary.load(view, params);
Вы можете задать любые параметры и методы прокси, а также переопределить родные. Сделать это можно одним из следующих способов:
Инициализируйте уже существующий прокси с дополнительной логикой. Вызовите метод webix.proxy() с 3 параметрами:
var dataProxy = webix.proxy("rest", "data.php", {
meta: "some text", //некоторые параметры
save:function(view, params){
params.data.meta = this.meta;
return webix.proxy.rest.save.call(this, view, params);
}
});
И используйте этот прокси следующим образом:
webix.ui({
view:"datatable", autoConfig:true,
save:dataProxy
});
Сделать это можно внутри метода init() нового прокси:
webix.proxy.custom = {
init:function(){
webix.extend(this, webix.proxy.rest);
},
meta:"text", //некоторые параметры
save:function(view, params){
params.data.meta = this.meta;
return webix.proxy.rest.save.call(this, view, params);
}
}
Или же вариант с немного другим синтаксисом:
webix.proxy.custom = webix.extend({
meta: "text", //некоторые параметры
save:function(view, params){
params.data.meta = this.meta;
return webix.proxy.rest.save.call(this, view, params);
}
}, webix.proxy.rest);
Чтобы использовать новый прокси, добавьте его как префикс пути к серверному скрипту:
webix.ui({
view:"datatable", save:"custom->my_script"
});
Прокси - это обычный JSON объект, который содержит:
Прежде всего, создайте объект прокси и опишите необходимую конфигурацию. Существует 2 способа:
{
view:"datatable",
url:{
$proxy:true,
load:function(view, params){
return webix.ajax().get("load.php", params);
}
}
}
webix.proxy.myCustomName = {
$proxy:true,
load:function(view, params){
return webix.ajax().get(this.source, params);
}
};
Затем добавьте имя прокси как префикс пути к соответствующему скрипту компонента:
{
view:"datatable",
url:"myCustomName->load.php"
}
//или после инициализации компонента
$$("datatable1").load("myCustomName->load.php");
У такого подхода есть некоторые преимущества, т.к. прокси можно использовать для нескольких компонентов.
Чтобы описать свою логику загрузки, внутри прокси определите метод load(), который должен возвращать промис или статические данные:
Промис данных
webix.proxy.load = {
$proxy:true,
load:function(view, params){
return webix.ajax("/samples/server/packages");
}
};
В статье об операциях AJAX вы найдёте более подробную информацию о возвращаемых данных.
Статические данные
webix.proxy.load = {
$proxy:true,
load:function(view, params){
var data = [ /* массив записей */];
return data;
}
}
Related sample: Datatable: Loading Data with URL and with Proxy
Чтобы описать логику загрузки данных на сервер, добавьте метод save():
webix.proxy.save = {
$proxy:true,
save:function(view, params, dp){
var id = params.data.id;
if (params.operation == "insert")
return webix.ajax().post("/samples/server/films", params.data);
// ... другие свойства
}
};
Related sample: Datatable: Saving with Proxy and Url
Обычно DataProcessor компонента следит за всеми изменениями на клиенте и посылает запросы на сохранение сразу после любой "insert/update/remove" операции.
Если же вы хотите, чтобы изменения пользователя сохранялись по требованию (например, при нажатии на кнопку "Сохранить"), необходимо настроить шаблон сохранения и сам DataProcessor следующим образом:
Для начала создайте прокси и добавьте ему метод saveAll(), который получает все изменения от DataProcessor до момента вызова этого метода:
webix.proxy.saveall = {
$proxy:true,
saveAll:function(view, updates, dp){
// обновления - объект изменённых записей
return webix.ajax().post(this.source, { data:updates });
}
};
После этого необходимо запретить автоматическую отправку изменений с помощью свойства autoupdate у DataProcessor. Также не забудьте использовать вышеупомянутый прокси в качестве url для сохранения:
{
view:"datatable", id:"datatable1",
autoConfig:true, editable:true,
url:"/samples/server/films",
save:{
autoupdate:false,
url:"saveall->/samples/server/films_all"
}
}
Теперь вызовите метод процессора компонента send(), чтобы передать изменённые данные в метод saveAll():
// например, в обработчике щелчка по кнопке
webix.dp($$("datatable1")).send();
Related sample: Saving All Data Changes All at Once: Datatable
В этом методе вы можеет описать изначальную логику прокси. Метод не принимает никаких параметров и ничего не возвращает.
Используется для загрузки данных.
Parameters:
Return value:
Промис данных или простой массив/объект с данными.
Используется для сохранения единичных записей. Вызывается при изменениях на клиенте.
Parameters:
Return value:
Промис данных или простой объект с данными.
Используется для сохранения сразу всех изменённых записей на клиенте. Срабатывает при вызове метода saveAll.
Parameters:
Return value:
Промис данных или простой массив с данными.
Вызывается только после вызова метода saveAll() и получения ответа от сервера (данные успешно сохранены). Это значит, что метод result() не сработает в случае с обновлением единичной записи.
Parameters:
Return value:
void
Наверх