Программирование

Что такое JavaScript TreeGrid и где его применяют

Готовые компоненты JavaScript ускоряют процесс разработки и позволяют избежать нежелательных ошибок. Рассмотрим интерфейсный элемент для веб-приложений — JavaScript TreeGrid.

Материал будет полезен frontend-разработчикам и начинающим JavaScript-программистам, которые занимаются разработкой бизнес-приложений и решений для работы с большим количеством данных.

Юрий Китин

IT product manager в XBSoftware


Что такое TreeGrid

TreeGrid или TreeTable — это способ организации табличных данных в виде списка иерархических таблиц. Он позволяет разработчикам создавать древовидные списки, где в качестве ветвей используют целые таблицы.

Компонент TreeTable появился в качестве ответа на UI Trees, с которым у разработчиков возникали проблемы. С одной стороны, TreeTable — это классический DataGrid, который позволяет удобно представить информацию в табличной форме. С другой — он выполняет древовидную иерархическую группировку табличных данных точно так же, как и виджет Tree.

Не стоит путать компонент TreeTable с группировкой строк и столбцов, применяемых в DataGrid.

Приём «группировка столбцов»

Этот механизм доступен в некоторых продвинутых UI-виджетах, например SpreadSheet JS, где есть группировка строк или столбцов похожая на Excel. Но TreeTable — более сложное решение, потому что группирует не только отдельные данные, но и целые массивы информации. Для просмотра такой структуры нужно отображать иерархически соподчинённые табличные данные и элементы управления.

Пример древовидной таблицы TreeGrid


Где и как применяют 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-разработчиков
  • Освоите профессию разработчика с нуля или добавите в арсенал необходимый язык программирования.


Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Телеграм Нетологии