Intermediate

Загрузка и сохранение данных

Интегрировать с сервером можно компоненты данных, хранилища на стороне клиента (Data Collections) и формы.

Как это реализовано:

для загрузки и сохранения данных вы можете написать свои пользовательские скрипты на предпочитаемом языке. По умолчанию формируется GET запрос на загрузку данных и POST на сохранение;
вы также можете использовать серверное REST API (MVC.Net, Ruby on Rails, PHP Yii MVC фреймворки в сочетании с вашими скриптами или коннекторами);
возможна интеграция с GraphQl, WebSockets. Вы также можете написать что-то своё, используя Ппользовательский proxy.

После того, как вы скачали пакет Webix, вы можете запустить серверные примеры на Node.js с помощью следующих команд:

npm install
npm run server

Примеры интеграции с серверными платформами

Ниже представлены несколько пакетных примеров того, как можно использовать Webix с различными серверными платформами:

Загрузка данных

Базовый код для загрузки данных при инициализации компонента выглядит так:

webix.ui({
    id:"dtable",
    view:"datatable",
    url:"data.php"
});

Или, чтобы загрузить данные после инициализации компонента, вызовите метод load():

$$("dtable").load("myscript.php", "xml");

Обратите внимание

Серверный скрипт, который вы передаёте в свойство url или метод load() выполняет GET запрос и возвращает данные с сервера в любом из доступных форматов;
Вам необходимо указать параметр datatype, если входящие данные не в формате JSON (формат по умолчанию);
В случае больших объёмов данных весьма кстати придётся динамическая загрузка;
Вы можете кастомизировать шаблон загрузки по умолчанию: задать необходимый режим или использовать ajax хелпер для передачи параметров в загружающий скрипт.

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

To load data from MongoDB, you might need to convert _id to id (the identifier in Webix). You can do it when you load data using a proxy. However, you can extend DataStore id method and use the primary key _id to set the id for incoming objects in order to improve performance.

webix.DataStore.prototype.id = function (data) {
  data.id = data._id || data.id || webix.uid();
  return data.id;
}

Сохранение данных

Базовый клиентский код для сохранения данных в базу выглядит следующим образом:

webix.ui({
    id:"dtable",
    view:"datatable",
    save:"save_script.php"
});

Обратите внимание

Скрипт для сохранения получает данные в POST запросе и сохраняет их в базу данных.
Скрипт для сохранения в большинстве случаев возвращает статус операции и ID изменяемого элемента. В этой статье вы найдёте информацию о том, как настроить ответ с сервера.
Сохранение данных может осуществляться с помощью Webix Ajax хелпера, который отличается большей гибкостью.

Кроме того, свойство save автоматически инициализирует DataProcessor для этого компонента, так что изменения данных передаются в скрипт для сохранения. DataProcessor слушает события компонента, задаёт операцию редактирования (например, вставить, обновить или удалить) и отправляет изменённые данные в сохраняющий скрипт в POST запросе.

Как задать ти операции

По умолчанию статус операции приходит в POST запросе как webix_operation. В большинстве случаев сохраняющий скрипт один и содержит шаблоны для разных операций. В то же время вы можете задать определённый скрипт для каждой операции. DataProcessor определит тип операции и запустит необходимый скрипт:

save:{
    "insert":"data/insert.php",
    "update":"data/update.php",
    "delete":"data/delete.php"
}

Если вам необходимо изменить исходный шаблон обработки данных, почитайте раздел документации о Dataprocessor.

Сохранение загруженных файлов

Если вы используете Webix Uploader, у вас может возникнуть вопрос о сохранении данных.

{
    view:"uploader",
    id:"uploader1",
    name:"uploader"
    upload:"upload.php"
    autosend:false
}
 
$$("uploader1").send();

Обратите внимание

Autosend должен иметь значение false для того чтобы сохранять данные только при вызове метода send. Когда вы вызываете метод, выполнится скрипт, заданный в свойстве upload.
Серверная часть загрузки детально описана здесь;
Информация о том, как интегрировать форму и uploader там же.

Форма для сохранения

Даные формы могут быть:

переданы в компонент к которому она привязана;
или (чаще) переданы на сервер с помощью Webix Ajax запроса.

Советуем почитать

Наверх