JavaScript UI виджеты для данных Webix

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

JavaScript UI виджет DataTable

DataTable (или DataGrid) — это мощный инструмент для управления табличными данными, разработанный на основе технологий HTML5. Этот виджет предлагает широкий выбор функций и возможностей. В первую очередь стоит отметить, что в DataTable очень просто редактировать и сортировать данные. Строки таблицы можно легко фильтровать при помощи встроенных фильтров или же можно задать свои критерии для поиска. Вы также можете проверить правильность введенных данных. Если ваш DataTable работает с большими объемами данных, вы можете разбить их на несколько страниц. Виджет имеет и такие возможности, как сохранение текущего состояния, drag-n-drop строк и колонок, работа с буфером обмена, дополнительные редакторы и фильтры, меню заголовка таблицы, группировка колонок, вертикальные заголовки, Sparkline, вложенные строки и виджеты.

Webix JavaScript DataTable UI widget
UI виджет DataView

DataView — это клиентский JavaScript виджет, который позволяет отображать различные объекты наиболее привлекательным образом. Вы можете группировать данные, легко добавлять и удалять ячейки, загружать только ту информацию, которая нужна вам в настоящий момент (динамическая загрузка данных), сортировать и фильтровать данные. Среди других возможностей DataView имеет пейджинг для более удобной навигации, несколько способов выделения ячеек, быстрое редактирование, drag-and-drop, картинки, которые позволяют конечным пользователям быстрее находить нужные элементы.

Webix DataView UI widget
JavaScript UI виджет List

JavaScript List — это UI виджет для визуального отображения списков данных. Он отлично работает с тысячами записей. Пользователи могут редактировать ячейки предварительно кликнув на них. Этот виджет также позволяет проверять данные по заданным правилам. Среди прочих возможностей динамическая загрузка данных, ленивая отрисовка, иерархическая группировка данных по категориям, X-list для горизонтальной ориентации данных, Unitlist для группирования больших объемов несортированной информации, анимированный пейджинг, быстрый поиск и горячие клавиши для удобной работы с буфером обмена.

Webix JavaScript List UI widget
JavaScript GroupList UI виджет

Grouplist — это виджет, который позволяет группировать ячейки в определенные категории. Организация данных в группе иерархическая. Это означает, что каждая ячейка может образовать собственную группу. Кроме того, Grouplist имеет очень удобные функции сортировки и фильтрации данных, которые значительно упрощают работу с информацией.

Webix JavaScript GroupList UI widget
UI виджет Property Sheet

Property Sheet — это редактируемый и настраиваемый список свойств. Этот виджет можно использовать для изменения вида и поведения компонентов в визуальных редакторах. Property Sheet предлагает разные режимы редактирования, позволяет создавать свои собственные редакторы. Вместо стандартных редакторов во всплывающих окнах, вы также можете создавать свои на основе виджета Webix Popup Window.

Webix Property Sheet UI widget
JavaScript UI виджет Query Builder

Query Builder используется для создания фильтров любой сложности для поиска данных. Это отдельный виджет может применяться с другими виджетами, например, с DataTable. Query Builder облегчает поиск при больших объемах информации. Вы можете добавить любое количество правил поиска, объединить их в группы, применяя логику И/ИЛИ, удалить текущие правила и создать свои собственные.

Webix JavaScript Query Builder
JavaScript UI виджет Tree

JavaScript Tree визуализирует иерархически организованные данные наиболее понятным и логическим образом. Вы можете без труда видеть все уровни зависимостей, раскрывать и сворачивать ветки одним кликом. Tree также имеет асинхронную загрузку уровней дерева, чекбоксы с двумя и тремя состояниями, навигацию с помощью клавиатуры и горячие клавиши. Этот виджет обеспечивает удобную работу с буфером обмена, разные режимы фильтрации, иконки для узлов дерева и drag-and-drop. Также есть возможность сохранять текущее состояние Tree в cookie-файлы, локальное или сессионное хранилище, чтобы восстановить его позже.

Webix JavaScript Tree UI widget
UI виджет TreeTable

TreeTable (или TreeGrid) сочетает в себе функции JavaScript Table и Tree. Данные в этом виджете очень легко редактировать. Вы можете сохранять его текущее состояние, а также экспортировать данные в Excel, PNG и PDF. В TreeTable есть много других возможностей, таких как чекбоксы с тремя состояниями, 8 режимов выделения данных, клиентская фильтрация со встроенными фильтрами (вы можете также сами определить правила поиска), удобная работа с буфером обмена и 6 типов графиков, чтобы визуализировать данные.

Webix JavaScript TreeTable UI control