UI виджет TreeTable

TreeTable (TreeGrid) - это JavaScript виджет, который позволяет сочетать возможности JavaScript Table и JavaScript Tree в одном виджете.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Редактируйте элементы Tree Table

Tree Table поддерживает все операции управления данными. Вы можете с легкостью редактировать содержимое ячеек, вводя новые значения в поля или выбирая опции из выпадающего списка, который можно дополнить чекбоксами для более удобного использования.

Кликните по любому элементу Tree Table, чтобы изменить его

Сохранение текущего состояния

Вы можете легко сохранять текущее состояние JavaScript TreeGrid, чтобы позже вернуться к нему.

Нажмите 'Save state', откройте и закройте ветки, затем нажмите 'Restore state'

Выделение элементов JavaScript TreeGrid

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

Нажмите на любой элемент, чтобы выделить строку

Экспорт данных в Excel, PNG и PDF

JavaScript компонент Tree Table позволяет экспортировать данные в PDF, PNG и Excel. Вы также можете изменить вид таблицы в файле, добавив несколько опций при экспорте.

Нажмите на кнопки, чтобы экспортировать Tree Table

Чекбоксы

Вы можете использовать чекбоксы в компоненте TreeGrid для выделения его элементов. Эта возможность помогает выбирать одновременно несколько элементов для редактирования или удаления. Вы можете использовать стандартные чекбоксы или чекбоксы с третьим 'неопределенным' состоянием.

Чекбоксы с тремя состояниями. Кликните по чекбоксам и затем разверните дерево

Фильтрация

Tree Table поддерживает клиентскую фильтрацию. Вы можете использовать встроенные фильтры или определить свои. В зависимости от типа данных в таблице, вы можете использовать один из доступных фильтров: фильтр по датам, числам, richselect фильтр, multicombo фильтр и т.д.

Примените фильтр к первому уровню таблицы (1-ая таблица) и ко всем уровням (2-ая таблица)

Буфер обмена

Благодаря поддержке буфера обмена, вы можете копировать и вставлять элементы таблицы в пределах данного Tree Table или вставлять их в другие компоненты. Копирование возможно в нескольких режимах, например, 'block', 'selection', и 'repeat'.

Используйте клавиатуру, чтобы скопировать и вставить элементы TreeTable

Sparkline

Чтобы визуализировать данные, вы можете добавлять небольшие графики в TreeTable. Sparkline бывают нескольких типов: линейные, двумерные, столбиковые, Сплайн-диаграммы, двумерные Сплайн-диаграммы и круговые диаграммы. Кроме того, вы можете добавлять всплывающие подсказки, которые будут появляться каждый раз при наведении курсора на график.

Нажмите на 'плюс', чтобы открыть дочерние элементы