В мире разработки часто возникает необходимость отфильтровывать большие объемы данных по различным временным интервалам. Это может быть неделя, год или любой другой период. Например в Webix Inventory App мы решили эту задачу с помощью компонентов DateRangePicker и Richselect. Как вы уже догадались, в этой статье мы создадим инструмент, который поможет отфильтровывать данные по определённым временным интервалам, а также переключаться между ними.
Библиотека Webix предлагает несколько способов редактирования табличных данных. Одни из самых распространённых практик — использование встроенных редакторов Datatable или же отдельных Webix Form. Однако вопрос остаётся открытым — как удачно подобрать инструменты и предоставить пользователю удобное и интуитивно-понятное решение?
Множество UI компонент содержат встроенный поиск или фильтрацию. Например, инструмент фильтрации в Webix DataTable.
Новый Webix 5.0 включает в себя виджет JavaScript GeoChart, созданный с помощью Google Maps API. GeoChart — это изящный сервис для создания картографических диаграмм c отображением данных стран и регионов. Я покажу вам, как использовать основные функции виджета для создания интерактивной карты мира. Если вы еще не знакомы с виджетом, я надеюсь, что GeoChart станет вашим верным другом. Если вы уже любите GeoChart так же сильно, как я, вы, вероятно, получите лучшее представление о том, как можно с ним взаимодействовать.
Webix предлагает множество возможностей визуализации линейных данных c помощью различных видов чартов — bar, pie, area, scatter и radar. Но что делать с иерархическими данными? Первое, что может прийти в голову — это Webix Tree, поскольку он отлично отображает связи между родительскими и дочерними элементами. Но на этом возможности визуализации этого компонента заканчиваются.
Чтобы найти что-то более мощное, нам нужно заглянуть в пакет с PRO-виджетами. Здесь мы видим Organogram (диаграмму на основе Tree), а также TreeMap. Давайте рассмотрим второй виджет повнимательнее. Он умеет отображать иерархические данные в красивой и компактной форме.
Самый простой код инициализации довольно лаконичен:
Результат будет следующим:
Всем привет! Давайте сегодня рассмотрим, какие решения предлагает Webix, чтобы сделать навигацию в приложении действительно удобной. Могу поспорить, что мы найдем что-то действительно стоящее! С самых первых дней своего существования библиотека предоставляет пользователям стандартное Меню, которое позволяет размещать элементы горизонтально или вертикально (и это слишком просто). Недавно разработчики библиотеки пошли дальше и создали два симпатичных виджета — Sidebar и Sidemenu, которые призваны сделать навигацию удобной для пользователей.
Давайте разберемся в функциональности этих виджетов и рассмотрим сценарии использования, подходящие для каждого из них.
Чтобы инициализировать Sidebar, достаточно вот такого простого кода:
В результате, вы получите вот такой виджет:
В отличие от обычных меню, которые вы можете создать с помощью компонента Меню, Мега меню имеют большие размеры. Это позволяет разместить внутри них другие компоненты и виджеты. Меню такого типа широко используются при создании интернет-магазинов, поскольку их удобно использовать для навигации по сайту.
Ниже представлен пример того, как может выглядеть Мега меню:
Демо готового Мега меню, а также его исходный код можно найти здесь.
В этой статье представлено пошаговое руководство по созданию Мега меню с помощью Webix.
DataTable — самый популярный виджет библиотеки компонентов Webix. Он быстрый, гибкий и может использоваться в самых разных сценариях. По умолчанию, в ячейках этого компонента отображается только текстовый контент. Тем не менее, вы можете использовать темплейты, чтобы показать более сложный контент в ячейках DataTable. Иконки, кнопки и даже другие виджеты могут использоваться в качестве темплейтов ячеек.
Давайте посмотрим, как это можно сделать.
Самый распространенный вариант использования — это добавление чекбокса в ячейку DataTable. Поскольку этот сценарий используется довольно часто, мы сделали для него готовое решение. Вам просто нужно задать его в качестве значения темплейта ячейки вот так:
и вы получите полноценный чекбокс.
Мы приветствуем гостевые статьи о JS разработке
