Advanced

Пользовательские скрипты

В случае пользовательских серверных скриптов вы самостоятельно пишете всю логику коммуникации с базой данных, выполняете запросы для получения данных из нужных таблиц, а также запросы для вставки, обновления и удаления данных.

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

webix.ui({
    view:"list",
    url:"load.php", 
    save:"save.php"
})

Свойство url загружает данные, которые возвращает скрипт. Свойство save указывает на скрипт, который сохраняет данные в базу каждый раз, когда вы вносите изменения на клиенте.

Инструкции ниже помогут вам настроить скрипты для возвращения данных и ответы на операции редактирования. Мы используем PHP с базой данных SQLite3.

Загрузка данных
Сохранение данных
Настройка ответа с сервера

Если вам нужно получить данные из другого домена и вы не уверены в том, как это сделать, ознакомьтесь с нашим вариантом кросс-доменной загрузки данных.

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

Webix компоненты поддерживают входные данные в JSON, JSArray, XML, HTMLtable и CSV форматах, поэтому убедитесь, что ваш скрипт возвращает данные поддерживаемого формата.

Вы можете представить полученный массив в JSON с помощью предназначенной для этого функции (json_encode() в PHP)

// подключаем базу данныъх
$db = new SQLite3('../../../common/testdata.sqlite');
 
// выбираем данные
$res = $db->query("SELECT * FROM films");
 
// конвентируем данные в json
$data = array();
while ($rec = $res->fetchArray(SQLITE3_ASSOC)) // каждый ряд
    $data[] = $rec;
// выводим результат
echo json_encode($data);

Загрузка в Datatree

В Datatree можно передать инлайн данные, сгруппированные на клиенте или иерархическими данными, сгруппированные серверным скриптом.

Для иерархических данных вам необходимо:

relation_id поля в таблице базы данных, который будет хранить ID родительской записи для каждой записи. Для корня этот параметр равен 0;
(необязательно) - поле open для каждой записи, которое определяет, будет ли превоначально открыта эта запись (1) или нет (0). При условии, что у неё есть дочерние элементы, конечно.

Данные формируются функцией, которая отправляет запрос с WHERE к базе. Запрос просит с сервера данные обо всех элементах, начиная с корня (это у него parent=0) и включая всех его детей. Данные, которые должна вернуть эта функция - JSON массив объектов. Каждый объект, если у него есть дети, должен хранить их массив в проперти с именем data.

function get($id = 0) {
    $db = new SQLite3('../../../common/testdata.sqlite');
    // подключаемся к базе данных
 
    // выбираем данные
    $res = $db->query("SELECT * FROM films_tree WHERE parent={$id}");
 
    // конвертируем данные в json
    $data = array();
    while ($rec = $res->fetchArray(SQLITE3_ASSOC)) {
        $rec["data"] = get($rec["id"]); // помещаем дочерние элементы в "data"
        $data[] = $rec;
    }
    // возвращаем json
    return $data;
}
 
// форматируем результат
echo json_encode(get());

Загрузка через форму

Метод load() содержит загружающий скрипт и иногда требует ID записи как часть GET запроса. Применяется к инициализированной форме на клиенте.

$$("form1").load("server/form.php?id=3");

На сервере у вас будет ID для использования в WHERE при SELECT запросе.

$id = $_GET["id"];
 
$res = $db->query("SELECT * FROM films WHERE id={$id}");

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

Метод save инициализирует DataProcessor, который получает готовые данные для отправки на сервер и вызывает скрипт при каждом изменении данных. Логику процессора по умолчанию можно кастомизировать.

Скрипты получают изменённые данные в теле POST зпроса. Для каждой добавленной, изменённой или удалённой записи все свойства её объекта отсылаются вместе с webix_operation.

id  8
rank    99
rating  
title   New
votes   100
webix_operation delete
year    2012

Вы также можете посылать дополнительные свойства элемента или обновлять этот элемент на клиенте:

var item = this.getItem(id);
item.old_rank = some; // setting new property and value for it
this.updateItem(id);

Новое свойство old_rank будет передано вместе с остальными в POST запросе.

Related sample: Datatable: Reordering

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

$operation = $POST['webix_operation'];
 
if($operation=="insert")
    $db->query("INSERT SQL query");

Не забудьте экранировать данные пользователя во избежании SQL инъекций:

$title = $db->escapeString($_POST["title"]);

и конвертировать данные в JSON согласно ранее упомянутому шаблону.

Сохранение в Datatree

В случае с datatree используйте ранее упомянутый шаблон. Также не забудьте обновить родительское поле значение элемента при запросах INSERT и UPDATE.

Конечно, вам нужно отрисовать это поле в процессе загрузки (SELECT * обеспечит это) и обновить его на клиенте при работе с данными дерева.

$parent = $_POST["parent"];
 
// запросы

Related sample: Tree: Saving

Сохранение через форму

Обычно, форма сохраняется при каком-либо событии на странице (например, нажатие на кнопку), поэтому нет необходимости создавать DataProcessor для этих целей. В результате POST запрос будет содержать только данные формы и no webix_operation тип.

Затем, необходимо решить, что делать дальше:

обновить данные записи (которая была загружена в форму) на сервере
добавить данные в необходимую таблицу в базе данных (напрмиер, создать новую запись);
обновить данные на клиенте. В этом случае форма должна быть привязана к компоненту или коллекции данных, для того чтобы форма могла получать данные из этого компонента и отправлять изменения назад, в то время как их скрипты для сохранения обработают эти изменения.

Типичный Ajax запрос для сохранения данных из формы на сервер выглядит следующим образом:

webix.ajax().post("server/form_save.php", $$("myform").getValues(), function(response) {
    webix.message(response.status);
});

Метод формы getValues() возвращает данные всех полей в виде JSON объекта - как раз подходит для параметров Ajax.

Далее мы рассмотрим варианты настройки ответов с сервера. О Webix API при Ajax операциях читайте эту статью.

Настройка серверного ответа

Для каждого запроса желательно настраивать ответ, который может являться обычным текстом или JSON объектом с необходимыми параметрами:

// простой текст при ошибке
echo "Data saving was not performed";
 
// JSON с ID элемента и статусом ошибки
echo '{ "id":"'.$id.'", "status":"error" }';
 
// JSON с ID элемента и статусом успеха
echo '{ "id":"'.$id.'", "status":"success" }';
 
// JSON для успешной операции добавления 
echo '{ "id":"'.$id.'", "status":"success", "newid":"'.$db->lastInsertRowID().'" }';
 
$res = $db->query(SQL query);
 
if($res)
    // ответ в случае успеха
else
    // ответ в случае ошибки

Для операции INSERT новое ID является важным атрибутом, так как на клиенте любой добавленный элементп получает временное ID, сгенерированное методом webix.uid() (например, 1369905287157).

После добавления этого элемента в таблицу базы данных, он получает "нормальное" ID (путём инкрементирования). Это ID будет загружено на клиент при обновлении страницы. Поэтому вам может понадобится это новое ID дял работы с недавно добавленным элементом.

Если вы используете Ajax запрос, эти ответы можно вывести в коллбэке. Если ответ - это JSON объект, любое его поле можно обработать отдельно.

webix.ajax().post("server/save.php", {}, function(response) {
    webix.message(response.status);
});

Подробнее о Ajax операциях в Webix.

Наверх