Моя карьера в перспективном развитии только что началась. В настоящее время я нахожусь в пробном периоде в одном из ИТ-компаний в Минске. Я исследую тонкости разработки веб-пользователей на основе JS Webix Библиотека Отказ Конечно, я рад поделиться своим скромным опытом и сохранить его как руководство этой любопытной библиотеки UI.
Четвертое задание
Библиотека Webix имеет все инструменты для реализации основных функций веб-разработки, или CRUD Отказ Эта статья охватывает следующие задачи:
- Редактирование данных таблицы через форму;
- Установка . Встроенный редактор строки ;
- добавление данных в список и график;
- Удаление предметов.
В документации вы можете узнать больше о Список Виджет, Treetable Виджет и DataTable Виджет покрыт в статье.
Исходные коды являются здесь Отказ
Вы можете найти готовое приложение здесь Отказ
Шаг 1. Редактирование данных через форму.
Я работаю здесь с «Приборная панель» Вкладка, где нарисована таблица и форма. Код в таблице находится в файле Table.js, код формы в форме.
Я добавлю Onafterselect событие на Таблица виджет. Когда это событие срабатывает, я получу данные из таблицы и пропустите ее в поля формы.
setvalues () Метод в приведенном выше коде проходит полученные значения в форме.
Я запускаю код и проверю результат:
Когда выбрана строка в таблице, его данные автоматически вводят в форму и готов к работе.
Чтобы сделать процесс более сложным, я сохраню изменения, если данные взяты из таблицы и отредактированы.
Я переписал Сохранением Функция и добавлять новые методы к нему:
Теперь в функции есть следующий алгоритм:
— Во-первых, проверяются два условия: прошедшие ли данные формы проверки, и произошло ли изменения в форме. Изменения в форме отслеживаются ISDIRTY () метод;
— Во-вторых, состояние «item_data.id» позволяет определить новую запись. Строка со всеми его данными передается в форму, включая идентификатор, для которой в форме нет текстового поля, но требуется для данных. Форма магазина и позволяет читать все прошедшие значения Итак, мы используем удостоверение личности для проверки.
— Наконец, после проверки добавлена либо новая запись с использованием Добавить () Метод или текущий элемент обновляется с новыми свойствами.
Чтобы обновить отредактированные данные, я использую UpdateItem () метод. Требуется два параметра: идентификатор выбранного элемента и набор новых свойств, взятых из формы. Когда функция вызывается, текущие данные заменяются и дополняются новыми данными.
Результат:
Шаг 2. Установка встроенного редактора.
На предыдущем шаге я отредактировал данные таблицы, используя форму. Теперь я попробую метод редактирования непосредственно в элементе. Этот метод применим как в таблице, так и в других компонентах для работы с большим количеством данных, например, в списке.
Я начинаю с таблицы дерева в вкладке «Продукты». Код таблицы находится в файле Products_Module.js.
Treetable Widget позволяет вам редактировать содержимое таблицы, но эта функция по умолчанию отключена. Редактирование устанавливается в двух местах: в конфигурации таблицы с Редактируемые: правда Настройка и в конфигурации каждого столбца. Редактор: «Текстовое» настройка установлена на столбцы. Атрибут «Text» указывает тип редактора. Для получения дополнительной информации о типах редактора см. Документация Отказ
Я добавил редакторов для заголовка и цен столбцов в коде. Нажав на любую клетку, открывается редактор текстовых полей:
Теперь я пойду на вкладку «Пользователи» и проанализировать опцию с редактированием Список виджет. Код виджета расположен в файле users_module.js.
Редактирование данных доступно по умолчанию для WeareTable и DataTable виджетов. Чтобы использовать встроенный редактор в других виджетах, вы можете использовать специальные Редактируемость модуль. Я использую этот модуль для редактирования данных виджета списка. Для этого я создадим пользовательский компонент, используя Protoui Метод на основе виджета списка.
Я пишу имя будущего виджета (свойство имени) и наследую необходимые модули для базы виджета.
Прототип виджета списка.
После звонка Protoui я получаю готовую компонент. Он встроен в виджет так же, как и все другие компоненты: с настройкой вида: «EditList».
Поскольку в каждой записи могут быть много полей, и в шаблоне списка нарисованы как имя, так и страна. EditorValue. : «Имя» настройка добавляется в конфигурацию, что указывает, какое поле может быть отредактировано.
Результат:
Шаг 3. Добавление данных в список и диаграмму.
Эта часть статьи использует виджеты списка и диаграммы, код которого находится в файле users_module.js и нарисовано на вкладке «Пользователи».
Виджеты диаграммы и списка используют одни и те же данные массива JSON. Поэтому, когда я реализую возможность добавить данные, необходимо, чтобы она попала в обе компоненты.
Для этого я нарисую кнопку «Добавить новый человек» в модуле пользователей.
Нажав на кнопку звонит Addperson Функция, которая добавляет новую запись в список.
Диаграмма показывает возраст от каждой записи, поэтому случайное число будет генерироваться для большего распространения.
Функция для добавления новой записи:
Результат:
Шаг 4. Удаление элементов.
Для начала я создаю новый столбец с тегом HTML и значок в виде таблицы.
Для обработки щелчков на значках я беру класс DELETE_ICON и записываю его на объект OnClick в качестве ключа, значение этой клавиши будет функцией, которая является обработчиком. Среди аргументов приходит идентификатор записи, поэтому я могу удалить его с Удалить () метод.
Список виджет код:
Алгоритм удаления строк списка Widget’s Rowsoval такой же, как виджет таблицы:
Результат удаления строк на вкладке «Пользователи»:
Вы можете найти готовое приложение здесь Отказ
Заключение
Реализация CRUD в библиотеке Webix JS выполняется по-разному. Есть встроенные редакторы для изменения данных, а API Это позволяет делать то же самое через стороннюю форму. Весь набор функций CRUD может произойти в форме с несколькими рядами кода. Легко объединить различные функции в архитектуре библиотеки.
Оригинал: «https://dev.to/webixui/part-4-working-with-data-crud-2n21»