Advanced

Webix прокси

В свойство компонента url, а также в его функцию load можно передать дополнительную логику загрузки данных.

Подразумевается, что все примеры запросов в этой статье осуществляются с помощью модуля webix.ajax. Более подробную информацию читайте в статье о операциях AJAX и webix.ajax API.

Встроенные Proxy

Существуют несколько готовых Webix прокси, которые можно использовать, добавив префиксы к скрипту для загрузки.

  • rest - для работы с сервером в режиме REST;
  • post - для загрузки данных в POST-запросе (GET по умолчанию);
  • binary - для загрузки и чтения бинарных файлов (данные из файла будут приходить в arraybuffer);
  • json - для отправки JSON данных на сервер через RESTful запросы "save" с типом "application/json”;
  • GraphQL - для работы с сервером через GraphQL API.

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

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

1. Неявно. Вставьте имя прокси в качестве префикса пути к серверному скрипту:

// прокси для загрузки
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"
});

2. Явно. С помощью метода webix.proxy():

var myProxy = webix.proxy("binary", "load.php");
 
webix.ui({
    view:"list"
    url: myProxy
});

Использование методов у встроенных прокси

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

  • init()
  • load()
  • save()
  • saveAll()
  • result()

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

У всех встроенных прокси есть хотя бы один из них: load() или save(), в зависимости от назначения прокси. Эти методы вызываются библиотекой при загрузке или сохранении, соответственно. Однако, вы также можете вызвать их с помощью API одним из следующих способов:

1. Через свойство url:

$$("grid").config.url.load(view, params);

2. С помощью экземпляра прокси:

var binary = webix.proxy("binary", "server/datatable.php");
 
webix.ui({
    view:"datatable",
    autoConfig:true,
    url:binary
});
 
binary.load(view, params);

Кастомизация встроенных прокси

Вы можете задать любые параметры и методы прокси, а также переопределить родные. Сделать это можно одним из следующих способов:

1. Инициализируйте уже существующий прокси с дополнительной логикой. Вызовите метод webix.proxy() с 3 параметрами:

  • имя встроенного прокси;
  • путь к скрипту;
  • объект с дополнительной логикой.
var dataProxy = webix.proxy("rest", "data.php", {
    meta: "some text", //some param
    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
});

2. Создайте новый прокси на базе уже существующего. С помощью метода webix.extend() добавьте новую функциональность.

Сделать это можно внутри метода init() нового прокси:

webix.proxy.custom = {
    init:function(){
        webix.extend(this, webix.proxy.rest);
    },
    meta:"text", //some param
    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", //some param
    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 объект, который содержит:

  • обязательное свойство $proxy со значением true;
  • функции, которые срабатывают при загрузке и сохранении;
  • пользовательские свойства и методы.

Прежде всего, создайте объект прокси и опишите необходимую конфигурацию. Существует 2 способа:

1. динамически, в свойстве url компонента:

{
    view:"datatable",
    url:{
        $proxy:true,
        load:function(view, params){
            return webix.ajax().get("load.php", params);
        }
    }
}

2. отдельным прокси. Обратите внимание, что серверный скрипт доступен через "this.source" внутри самого прокси:

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

Методы прокси

init()

В этом методе вы можеет описать изначальную логику прокси. Метод не принимает никаких параметров и ничего не возвращает.

load()

Используется для загрузки данных.

Parameters:

Return value:

Промис данных или простой массив/объект с данными.

save()

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

Parameters:

  • view (object) - компонент, с которым вы работаете;
  • params (object) - объект со следующими полями:
    • data - объект данных измененной записи,
    • id - ID записи;
    • operation - название операции ("insert", "update" или "delete");
  • dp (object) - объект DataProcessor;

Return value:

Промис данных или простой объект с данными.

saveAll()

Используется для сохранения сразу всех изменённых записей на клиенте. Срабатывает при вызове метода saveAll.

Parameters:

  • view (object) - компонент, с которым вы работаете;
  • update - array - массив изменённых записей, каждая из которых содержит объект данных, ID записи и название операции;
  • dp (object) - объект DataProcessor;

Return value:

Промис данных или простой массив с данными.

result()

Вызывается только после вызова метода saveAll() и получения ответа от сервера (данные успешно сохранены). Это значит, что метод result() не сработает в случае с обновлением единичной записи.

Parameters:

  • state (object) - состояние операции;
  • view (object) - компонент, с которым вы работаете;
  • dp (object) - объект DataProcessor;
  • text (string) - текст ответа с сервера;
  • data - object - необработанные данные ответа с сервера;
  • loader (object) - объект XHR загрузчика.

Return value:

void

Наверх