Готовые компоненты JavaScript ускоряют процесс разработки и позволяют избежать нежелательных ошибок. Рассмотрим интерфейсный элемент для веб-приложений — JavaScript TreeGrid.
Материал будет полезен frontend-разработчикам и начинающим JavaScript-программистам, которые занимаются разработкой бизнес-приложений и решений для работы с большим количеством данных.
Что такое TreeGrid
TreeGrid или TreeTable — это способ организации табличных данных в виде списка иерархических таблиц. Он позволяет разработчикам создавать древовидные списки, где в качестве ветвей используют целые таблицы.
Компонент TreeTable появился в качестве ответа на UI Trees, с которым у разработчиков возникали проблемы. С одной стороны, TreeTable — это классический DataGrid, который позволяет удобно представить информацию в табличной форме. С другой — он выполняет древовидную иерархическую группировку табличных данных точно так же, как и виджет Tree.
Не стоит путать компонент TreeTable с группировкой строк и столбцов, применяемых в DataGrid.
Этот механизм доступен в некоторых продвинутых UI-виджетах, например SpreadSheet JS, где есть группировка строк или столбцов похожая на Excel. Но TreeTable — более сложное решение, потому что группирует не только отдельные данные, но и целые массивы информации. Для просмотра такой структуры нужно отображать иерархически соподчинённые табличные данные и элементы управления.
Где и как применяют TreeGrid
Такие интерфейсные решения востребованы в Big Data, аналитических системах и финансовой статистике.
Ритмичность данных — ключевое преимущество компонентов TreeTable. С помощью TreeGrid появляется возможность работать с трёхмерными массивами информации.
На конференции в Сан-Франциско разработчик и бывший сотрудник Google Дэн Даскалеску представил прототип аналитической системы, ядром которой выступал TreeGrid. Это удачный пример востребованности TreeTable в прикладных задачах с большим количеством данных.
Команда разработчиков ставила перед собой амбициозную задачу — создать инструменты для работы со сложно структурированными данными. Но компонент TreeGrid помог им решить основные задачи и закончить проект быстрее.
Преимущества и недостатки TreeGrid
Главный плюс TreeGrid — возможность визуализировать трёхмерные массивы данных на одном экране, без переключения на другие вкладки. К другому преимуществу TreeGrid можно отнести возможность быстрой навигации через большие объёмы данных без использования фильтров и поисковых запросов.
Но есть и явные недостатки:
- Пользователь может потеряться в большом количестве вложенных таблиц. Избежать этого позволяют элементы навигации и управления таблицами.
- Большое количество данных, загруженных в браузер, серьезно нагружает клиентскую часть системы и может привести к ошибкам из-за физических ограничений.
- Сложные таблицы с большим числом строк и столбцов будут медленно отрисовываться в браузере, поэтому стоит выбирать решения максимально оптимизированные по скорости рендеринга.
- Нельзя построить сводную таблицу.
Какие компоненты JavaScript TreeGrid выбрать
Виджет Webix TreeTable
Характеристика. Основан на компоненте DataGrid и обладает всеми его особенностями, включая мини-графики (спарклайны), поддержку буфера обмена (Clipboard), расширенные фильтры. Компонент Webix TreeTable объединяет свои функции с различными способами группировки информации, которые доступны в DataGrid: rowspan, colspan и grid grouping.
У виджета хорошо проработан drag-n-drop отдельно для строк и столбцов, есть возможность изменять ширину всех полей и создавать вертикальные заголовки.
Цена. Доступна бесплатная версия с открытым исходным кодом. Коммерческий пакет с дополнительными функциями и поддержкой стоит от $449.
TreeGrid
Характеристика. Редактируемый JavaScript TreeGrid — это компонент DHTML, который позволяет отображать и редактировать данные в сетке, таблице, дереве сетки, виде дерева или гистограмме на HTML-странице. Это быстрая сетка AJAX со множеством функций: расширенные формулы и вычисления ячеек, многоуровневые сводные таблицы Pivot, создание диаграмм Ганта, отображение и обновление пользовательских объектов JavaScript и внешних объектов, различные маски редактирования, компонент календаря. Компонент TreeGrid позволяет загружать данные в форматах XML и JSON. Виджет доступен под лицензиями Basic, Personal, Standard и Grand.
Цена. Доступна бесплатная версия с открытым исходным кодом. Коммерческие лицензии — от $79.
jQuery TreeTable
Характеристика. Плагин для библиотеки JavaScript jQuery. Этот компонент отображает дерево в виде HTML-таблицы. Виджет позволяет создавать несколько столбцов для отображения дополнительной информации помимо дерева. Глубина дерева может быть неограниченной.
Быстрая и легкая библиотека, что значительно упрощает веб-разработку. Она содержит простые в использовании API, которые поддерживает ряд браузеров.
Цена. Бесплатная версия с открытым исходным кодом.
Компонент DHTMLX TreeGrid
Характеристика. Расширение компонента dhtmlxGrid, которое дополняет функциональность мощной datagrid расширяемыми строками, грамотным синтаксическим анализом XML (парсингом), рендерингом и поддержкой постраничной навигации (пагинации). Основанный на AJAX, компонент JavaScript treegrid с динамической загрузкой способен отображать неограниченное количество строк и обрабатывать большие объёмы данных. Он предоставляет конечным пользователям удобное встроенное редактирование, расширенное перетаскивание строк и столбцов, режим разделения, сортировку и раскраску столбцов, а также ряд математических формул.
DHTMLX TreeGrid можно легко стилизовать с помощью CSS и встроенных скинов. Он доступен как часть фреймворка JavaScript UI dhtmlxSuite или как автономный компонент в рамках версии Professional.
Цена. Доступна бесплатная версия с открытым исходным кодом. Цена на коммерческие лицензии начинается от $79.
Виджет Sencha TreeGrid
Характеристика. У Sencha есть JavaScript фреймворк, который предоставляет ряд готовых компонентов пользовательского интерфейса для создания высоконагруженных, кроссплатформенных веб-приложений. Один из важных компонентов этой библиотеки — высокопроизводительный виджет TreeGrid. Этот компонент имеет такие функции: сортировка, фильтрация, множественные заголовки, навигация по клавиатуре, предварительная загрузка узлов с помощью одного AJAX запроса, пользовательские иконки. Sencha Ext JS доступен под лицензиями GNU GPLv3 и Commercial.
Цена. Доступна бесплатная версия с открытым исходным кодом. Коммерческие лицензии начинаются от $1 295 .
Сравнение виджетов JavaScript TreeTable
Параметры по которым мы сравниваем виджеты.
Fully editable — возможность редактировать данные на стороне клиента прямо в браузере.
Saving current state — сохранение данных и статуса таблицы при перезагрузке браузера или разрыве сессии.
Selection modes — наличие разнообразных методов выбора данных: мультиселект, использование мыши или клавиатуры.
Data export — возможность экспортировать данные.
Checkboxes — встроенная поддержка Checkboxes.
Filtering — наличие фильтров для выбора нужных данных.
Clipboard — поддержка буфера обмена.
Sparklines — встроенные графики для рядов данных.
Как видно из таблицы, некоторые разработчики пошли намного дальше и предлагают законченное UI-решение для работы с данными.
Курсы нетологии- Курсы по веб и мобильной разработке для новичков и junior-разработчиков
- Освоите профессию разработчика с нуля или добавите в арсенал необходимый язык программирования.
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.