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 хелпер для передачи параметров в загружающий скрипт.

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

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

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

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"
}

Related sample:  Server-side Integration: Custom URL

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

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

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

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

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

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

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

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

Related sample:  Form: Saving Data to Server

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

Наверх