Я начинающий фронтенд разработчик. На данный момент я нахожусь на стажировке в ИТ-компании в Минске. Я изучаю разработку веб-интерфейсов с помощью библиотеки JS Webix. Я с нетерпением жду возможности поделиться своим скромным опытом и сохранить его в своего рода учебном пособии по этой интересной UI-библиотеке.
ПЯТАЯ ЗАДАЧА
В предыдущей статье Работа с данными на основе CRUD-функций я писал о стандартных задачах по управлению данными приложения. На этом этапе я постараюсь сделать приложение более удобным для пользователя и реализую возможность фильтровать, сортировать и группировать данные. В этой статье я рассмотрю следующие задачи:
- фильтрация и сортировка данных таблицы;
- фильтрация и сортировка через API;
- группировка данных в таблице дерева;
- синхронизирующие компоненты;
В документации вы можете узнать больше об используемых в статье виджетах Список, Таблица дерева и Виджет таблицы данных.
Исходный код находится здесь.
Готовое приложение вы можете найти здесь.
Фильтрация и сортировка данных таблицы
Начнем с таблиц, которые я чаще всего использовал для работы с большим объемом данных. Таблицы в библиотеке Webix имеют ряд встроенных фильтров, которые встроены непосредственно в заголовок виджетов DataTable и TreeTable.
В виджете Таблица я использую две опции: простой текстовый фильтр (textFilter) и фильтр с набором опций в выпадающем списке (selectFilter). Таблица позволяет добавить по одному фильтру для каждого столбца. Я сделаю это для двух: название и год. Я установлю в них Заголовок как массив, а не строку, чтобы он соответствовал заголовку и фильтру. Второй элемент массива — это объект со свойством содержимого и именем фильтра.
Код виджета "Таблица" находится в файле table.js и отображается на вкладке "Информационная панель".
При вводе символов в «textFilter» данные будут фильтроваться по совпадению подстроки. При выборе опции в «selectFilter» она будет отфильтрована по выбранному значению.
Вот результат фильтрации по подстроке «звезда»:
А это результат фильтрации элементов по выбранному значению «1991»:
Сортировка. Как и в случае с фильтрами, настроить сортировку столбцов очень просто. Для этого добавьте свойство сортировка в конфигурацию столбца. Есть несколько готовых типов сортировки: по числовым значениям, по дате и по строке. Для столбцов год, голоса и рейтинг я установлю настройку sort: int для сортировки по числовым значениям. Для столбца заголовка значение будет string.
При нажатии на заголовок столбца данные будут отсортированы в соответствии с их типом. Вот результат сортировки по рейтингу:
Сортировка и фильтрация через API
Только таблицы имеют готовые решения для фильтрации и сортировки элементов. Как правило, все виджеты Webix поддерживают эти функции с помощью методов API фильтрации и сортировки. Я продемонстрирую программную фильтрацию и сортировку в виджете Список.
Код виджета «Список» находится в файле users_module.js и отображается на вкладке «Пользователи».
Фильтрация. Во вкладке Пользователи после кнопки Добавить нового человека я размещу виджет Текст, для фильтрации имен в списке.
Теперь я открою файл script.js и добавлю логику для фильтрации элементов.
Элементы фильтруются по такому принципу:
- методом attachEvent добавляю обработчик события onTimedKeyPress;
- событие onTimedKeyPress срабатывает при вводе символов в текстовое поле, но с небольшой задержкой, чтобы фильтр не срабатывал при каждом нажатии клавиш;
- затем я получаю введенный текст и использую метод фильтр, чтобы начать фильтрацию.
Вот результат фильтрации через ввод текста:
Сортировка. Элементы виджета списка будут отсортированы нажатием кнопок «Сортировать по возрастанию» и «Сортировать по убыванию».
Чтобы создать кнопки на вкладке Пользователи, я добавлю два виджета Кнопка с обработчиком события клик после текстового поля.
Внутри обработчика кликов метод sort принимает следующие параметры: имя поля для сортировки данных и направления сортировки: asc (по возрастанию) и desc (по убыванию). По умолчанию элементы данных представляют строки и сортируются соответствующим образом.
В результате имена в списке отсортированы по алфавиту:
Группировка данных в древовидной таблице
Рассмотрим ситуацию, когда данные необходимо сгруппировать по случайным параметрам.
Я буду изучать группировку на примере виджета TreeTable.
Код виджета TreeTable находится в файле products_module.js и отображается на вкладке «Продукты».
В статьях Модули, диаграммы, древовидные таблицы и Работа с данными. CRUD» Я использовал иерархические данные в древовидной таблице. Сейчас я их изменю, чтобы получился линейный массив. Я избавлюсь от иерархии и перенесу из нее поле категория в каждую запись.
Существует два способа группировки данных в таблице:
- сразу после их загрузки;
- динамически, используя методы группировать и разгруппировать.
Параметры этих методов одинаковы и мне нужно сгруппировать данные один раз, как только они будут доступны, поэтому я использую первый вариант.
В конфигурацию виджета TreeTable я добавлю свойство схема. Это свойство определяет, как данные будут обрабатываться в различных ситуациях. Среди обработчиков в схеме есть метод $group, который я буду использовать для группировки данных.
Внутри обработчика $group используются два параметра:
- обязательный параметр by, который группирует данные. Здесь это одно из полей («категория»);
- объект map, где мы будем описывать поля данных для созданных групп. Группировка разбивает исходные данные по заданным параметрам и создает для них «родительские записи». Мы можем использовать карту для добавления новых полей в эти записи. Для корректного отображения данных я добавлю поле «название». Его значением будет параметр, который используется для группировки.
Кроме того, я установил функцию $ sort для сортировки сгруппированных данных в алфавитном порядке.
Результат группировки следующий:
Синхронизация компонентов
В задаче используются виджеты "Диаграмма" и "Список". Их код находится в файле users_module.js, и они отображаются на вкладке «Пользователи».
Виджеты «Диаграмма» и «Список» используют тот же массив JSON, что и данные. Эти компоненты могут быть связаны так, что все изменения данных в одном из них (источнике) передаются в другой. Для этого используется метод синхронизации.
Метод синхронизация позволяет копировать данные из одного компонента и передавать их в другой. Таким образом, изменения в основном компоненте, такие как добавление, удаление и так далее, тут же отражаются в другом.
Для начала в виджете График удалю ссылку на данные.
Теперь в файле script.js с помощью метода sync я синхронизирую виджет Chart с виджетом List.
В функции addPerson мы добавляем данные только для виджета List.
Теперь при добавлении или удалении записей из списка изменения будут происходить и в Диаграмме. Сортировка и фильтрация в виджете «Список» теперь также влияют на данные на диаграмме.
Сводка
На практических примерах я показал, как улучшить пользовательский опыт. Помимо стандартной сортировки и фильтрации с помощью API, мы освоили встроенные средства для этого в виджетах DataTable и TreeTable с единой настройкой. Мы продемонстрировали, как группировать данные в таблице, а пример синхронизации расширил возможности повышения производительности виджетов, использующих один и тот же источник данных.
Готовое приложение вы можете найти здесь.