Библиотека 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. Поскольку этот сценарий используется довольно часто, мы сделали для него готовое решение. Вам просто нужно задать его в качестве значения темплейта ячейки вот так:
и вы получите полноценный чекбокс.
Всем нравится пользоваться простыми приложениями с интуитивно понятным интерфейсом. Pецепт такого приложения прост: возьмите немного HTML-тегов, добавьте подходящий фреймворк, например, Bootstrap, и ваше приложение готово. В повседневной разработке все происходит немного по-другому. Бизнес-приложения работают со сложными данными, поэтому для их представления требуется более продвинутый интерфейс. Одним из таких кейсов является использование вложенных данных. Готового решения для отображения в HTML или Bootstrap пока нет. Но решить проблему можно с помощью Webix UI.
Простейший виджет, который можно использовать для отрисовки вложенных данных — это Tree. Этот элемент интерфейса, который довольно часто используется в десктопных приложениях, но редко встречается в веб-версиях. Webix Tree обладает полной функицональностью виджета tree. Он позволяет представлять иерархические данные в виде дерева, ветки которого можно развернуть или свернуть. Webix Tree работает быстро, отрисовывая тысячи элементов менее, чем за секунду. Если этого мало, можно использовать динамическую загрузку данных.
Мы приветствуем гостевые статьи о JS разработке
