Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.

ЧЕТВЕРТАЯ ЗАДАЧА

В работе с данными важно иметь возможность выполнить несколько типов операций. В web разработке за это отвечает CRUD — четыре базовые функции. У библиотеки Webix есть все средства для реализации CRUD. Основой для решения новых задач мне послужит материал из предыдущих публикаций: создание интерфейса приложения, модулей проекта и работа с формами. В этой статье будут рассмотрены следующие задачи:

редактирование данных таблицы через форму;
установка встроенного редактора строк;
добавление данных в список и диаграмму;
удаление элементов;

В документации можно ознакомиться с использованными в статье виджетами List, Treetable, Table.

Исходники находятся по ссылке.

С получившимся демо приложения можно ознакомиться тут.

Шаг 1. Редактирование данных через форму

В этом шаге я буду работать со вкладкой «Dashboard» в которой отрисованы таблица и форма. Код таблицы находится в файле table.js, код формы в form.js.

В статье “Работа с формами” новые записи добавлялись методом add(), который был дополнен валидацией формы. Теперь форма будет использована и для редактирования записей.

Виджету Table я добавлю событие onAfterSelect.
При срабатывании этого события я получу данные из таблицы и передам их в поля формы.

const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100}
    ],
    on:{
        onAfterSelect(id){
            let values = $$("film_list").getItem(id);
            $$("film_form").setValues(values)
        }
    }
}

Метод setValues(), в приведенном коде, отвечает за передачу полученных значений в форму.

Запускаю код и проверяю результат:

Как только строка в таблице выбрана, её данные автоматически попадают в форму и готовы к работе.

Теперь я усложняю процесс: новая запись, как и прежде, будет добавляться в таблицу; если же данные взяты из таблицы и отредактированы, то сохраняю эти изменения.

Перепишу функцию saveItem и добавлю в нее новые методы:

let saveItem = () => {
    let form = $$( "film_form" );  
    let list = $$( "film_list" );  
    let item_data = $$("film_form").getValues();    
    if( form.isDirty() && form.validate() ){
        if( item_data.id ) 
            list.updateItem(item_data.id, item_data);
        else 
            list.add( item_data );
    }
}

Теперь у функции следующий алгоритм:

в начале запускается проверка двух условий — прошли ли данные формы валидацию, и произошли ли в форме изменения. Изменения в форме отслеживает метод isDirty();

после этого, условие «item_data.id» позволяет определить новую запись. В форму передается строка со всеми ее данными, включая id, для которого в форме нет текстового поля, зато для данных он обязателен. Форма хранит и позволяет считывать все переданные значения, поэтому используем id для проверки;

после сверки записей происходит либо добавление новой записи — методом add(), либо обновление текущего элемента новыми свойствами.

Для обновления отредактированных данных используется метод updateItem(). Метод принимает два параметра: id выбранного элемента и набор новых свойств взятых из формы. При вызове функции текущие данные заменяются и дополняются новыми.

Результат:

Шаг 2. Установка встроенного редактора

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

Начну с древовидной таблицы во вкладке “Products”. Код таблицы находится в файле products_module.js.

Виджет Treetable позволяет редактировать содержимое таблиц, но по умолчанию эта функция отключена. Редактирование настраивается в двух местах: в конфигурации таблицы, настройкой editable:true, и в конфигурации каждой колонки. Колонкам устанавливается настройка editor:”text”. Атрибут “text” задает тип редактора. Подробнее о типах редактора описано в документации.

const products = {
    editable:true,
    view:"treetable",
    scrollX:false,
    columns:[
        { id:"id", header:"", width:50 },
        { id:"title", header:"Title", fillspace:true, 
        template:"{common.treetable()} #title#", editor:"text" },
        { id:"price", header:"Price", width:200, editor:"text" }
    ],
    select:"row",
    url:"data/products.js",
    rules:{
        "price":webix.rules.isNotEmpty,
        "title":webix.rules.isNotEmpty
    }
}

В коде я добавил редакторы для колонок Title и Price. По клику на любую ячейку в них откроется редактор — текстовое поле:

Теперь перейду во вкладку “Users”, и разберу вариант с редактированием виджета List. Код виджета находится в файле users_module.js.

Редактирование данных доступно по умолчанию для виджетов TreeTable и DataTable.Чтобы использовать встроенный редактор в других виджетах, можно задействовать специальный модуль EditAbility. Этот модуль я использую, чтобы редактировать данные виджета List. Для этого, я на основе виджета LIst я создам пользовательский компонент при помощи метода protoUI.

Записываю имя — свойство name — будущего виджета и наследую для виджет-основы нужные модули.

Прототип виджета List:

webix.protoUI({
    name:"editlist"
}, webix.EditAbility, webix.ui.list);

После вызова protoUI получаю готовый компонент. В виджет он встраивается так же, как и все остальные — настройкой view:"editlist".

view: "editlist",
editable:true,
editor:"text",
editValue:"name",
id:"user_list",
select:true,
url:"data/users.js",
template:"#name# from #country# <span class='webix_icon wxi-close'></span> "
}

Поскольку в каждой записи может быть много полей, а в template листа отрисовано сразу name и country, в конфигурации добавлена настройка — editorValue:”name”, указывающее на то, какое поле можно отредактировать.

Результат:

Шаг 3. Добавление данных в список и диаграмму

В этой части статьи использованы виджеты List и Chart., код которых расположен в файле users_module.js, и отрисован во вкладке "Users".

Виджеты Chart и List используют одни и те же данные — массив JSON. Поэтому когда я реализую возможность добавления данных, нужно чтобы они попадали в оба компонента.

Для этого в модуле users я отрисую кнопку «Add new person».

{
    cols:[
        { 
        view:"button", 
        id:"btn_add_person", 
        value:"Add new person", 
        width:150, css:"webix_primary", 
        click:addPerson
        },
       {}
    ]
}

Клик по кнопке, вызывает функцию addPerson добавляющую в список новую запись.

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

Функция добавления новой записи:

let addPerson = () => {
    let obj = {
        name:"Some name",
        age:Math.floor(Math.random() * 80) + 10, 
        country:"Some country"
    }
    $$("user_list").add(obj);
    $$("chart").add(obj);
};

Результат:

Шаг 4. Удаление элементов

Удаление элементов будет продемонстрировано на примере виджета List — вкладка Users и виджета Table — вкладка "Dashboard".

Для начала, в виджете Table я создам новую колонку в которую помещу html-тег с иконкой.

Чтобы отследить клики по иконкам, нужно использовать свойство таблицы onClick. Это объект, который хранит обработчики, связанные с элементами по одному из их CSS классов — у меня, это "delete_icon".

Для обработки кликов по иконкам, беру их класс delete_icon и записываю его в объект onClick как ключ, значение этого ключа будет функция — наш обработчик. Среди аргументов приходит id записи, так что ничто не мешает её удалить методом remove().

Код виджета Table:

const table = {
    view:"datatable", 
    id:"film_list",
    scroll:"y",
    select:true,
    url:"data/data.js",
    hover:"myhover",
    columns:[
        { id:"rank", header:"", width:50, css:"rank"},
        { id:"title", header:"Film title", fillspace:true},
        { id:"year",  header:"Released", width:100},
        { id:"votes", header:"Votes", width:100},
        { id:"rating", header:"Rating", width:100},
        { header:"", template:"<span class='webix_icon wxi-close delete_icon'></span>", 
        width:35}
    ],
    onClick:{
        delete_icon(e, id){
        this.remove(id);
        return false;
        }
    },
    on:{
        onAfterSelect(id){
            let values = $$("film_list").getItem(id);
            $$("film_form").setValues(values)
        }
    }
}

Алгоритм удаления строки у виджета List, такой же как и у виджета Table:

{
    view: "editlist",
    editable:true,
    editor:"text",
    editValue:"name",
    id:"user_list",
    select:true,
    url:"data/users.js",
    template:`#name# from #country# 
    <span class='webix_icon wxi-close delete_icon'></span> `,
    onClick:{
        delete_icon(e, id){
            this.remove(id);
            return false;
        }
    }
},

Результат удаления строк во вкладке Users:

С готовым приложением можно ознакомиться тут.

Заключение

Реализация CRUD при помощи js библиотеки Webix достигается различными способами: Для изменения данных есть встроенные редакторы, и API, которое позволяет делать то же самое, но уже через стороннюю форму. Добавление данные имеет различные сценарии, а в форме можно осуществить весь набор функций CRUD. Методы реализуются при помощи нескольких строк кода. Архитектура библиотеки позволяет легко комбинировать между собой различные функции.

JavaScript библиотека Webix глазами новичка. Часть 4. Работа с данными. CRUD