Я начинающий фронтенд разработчик. На данный момент я нахожусь на стажировке в ИТ-компании в Минске. Я изучаю разработку веб-интерфейсов с помощью библиотеки JS Webix. Я с нетерпением жду возможности поделиться своим скромным опытом и сохранить его в своего рода учебном пособии по этой интересной UI-библиотеке.

ПЯТАЯ ЗАДАЧА

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

В документации вы можете узнать больше об используемых в статье виджетах Список, Таблица дерева и Виджет таблицы данных.

Исходный код находится здесь.

Готовое приложение вы можете найти здесь.

Фильтрация и сортировка данных таблицы

Начнем с таблиц, которые я чаще всего использовал для работы с большим объемом данных. Таблицы в библиотеке 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 с единой настройкой. Мы продемонстрировали, как группировать данные в таблице, а пример синхронизации расширил возможности повышения производительности виджетов, использующих один и тот же источник данных.

Готовое приложение вы можете найти здесь.