treeDataGrid

ДЕМО

Таблица данных с возможностью сворачивания и разворачивания дочерних записей в одном из столбцов. Похожа на dataGrid и поддерживает большую часть его функциональности, но лучше подходит для работы с иерархическими данными, обеспечивая интуитивную навигацию.

XML-элемент	`treeDataGrid`
Java-класс	`TreeDataGrid`
Атрибуты	id - alignSelf - allRowsVisible - classNames - colspan - columnReorderingAllowed - css - dataContainer - detailsVisibleOnClick - dropMode - editorBuffered - emptyStateText - enabled - height - hierarchyProperty - maxHeight - maxWidth - metaClass - minHeight - minWidth - multiSort - multiSortOnShiftClickOnly - multiSortPriority - nestedNullBehavior - pageSize - rowDraggable - selectionMode - showOrphans - tabIndex - themeNames - visible - width
Обработчики	AttachEvent - BlurEvent - CellFocusEvent - CollapseEvent - ColumnReorderEvent - ColumnResizeEvent - DetachEvent - ExpandEvent - FocusEvent - GridDragEndEvent - GridDragStartEvent - GridDropEvent - ItemClickEvent - ItemDoubleClickEvent - SortEvent - dataGenerator - dragFilter - dropFilter - enterPressHandler - partNameGenerator - tooltipGenerator
Элементы	actions - columns - column - contextMenu - emptyStateComponent

XML-элемент

treeDataGrid

Java-класс

TreeDataGrid

Атрибуты

id - alignSelf - allRowsVisible - classNames - colspan - columnReorderingAllowed - css - dataContainer - detailsVisibleOnClick - dropMode - editorBuffered - emptyStateText - enabled - height - hierarchyProperty - maxHeight - maxWidth - metaClass - minHeight - minWidth - multiSort - multiSortOnShiftClickOnly - multiSortPriority - nestedNullBehavior - pageSize - rowDraggable - selectionMode - showOrphans - tabIndex - themeNames - visible - width

Обработчики

AttachEvent - BlurEvent - CellFocusEvent - CollapseEvent - ColumnReorderEvent - ColumnResizeEvent - DetachEvent - ExpandEvent - FocusEvent - GridDragEndEvent - GridDragStartEvent - GridDropEvent - ItemClickEvent - ItemDoubleClickEvent - SortEvent - dataGenerator - dragFilter - dropFilter - enterPressHandler - partNameGenerator - tooltipGenerator

Элементы

actions - columns - column - contextMenu - emptyStateComponent

Основы

treeDataGrid в основном повторяет функциональность компонента dataGrid.

Пример объявления treeDataGrid в XML-дескрипторе экрана:

<data readOnly="true">
    <collection id="departmentsDc"
                class="com.company.onboarding.entity.Department"> (1)
        <fetchPlan extends="_base">
            <property name="hrManager" fetchPlan="_base"/>
            <property name="parentDepartment" fetchPlan="_base"/>
        </fetchPlan>
        <loader id="departmentsDl">
            <query>
                <![CDATA[select e from Department e]]>
            </query>
        </loader>
    </collection>
</data>
<layout>
            <treeDataGrid
                          hierarchyProperty="parentDepartment"
                          width="100%"
                          minHeight="20em"
                          dataContainer="departmentsDc"> (2)
                <columns> (3)
                    <column property="name"/>
                    <column property="hrManager"/>
                </columns>
            </treeDataGrid>
</layout>

1	Контейнер коллекции для сущности `Department`.
2	`treeDataGrid` привязан к контейнеру `departmentsDc` через атрибут `dataContainer`.
3	Элемент `columns` определяет, какие атрибуты сущности отображаются в столбцах.

Действия

Компонент treeDataGrid реализует интерфейс HasActions и может содержать как стандартные действия списка, так и пользовательские действия. Действия вызываются через кнопки или контекстное меню (по правому клику).

Для добавления действия в Jmix Studio:

Выберите компонент в XML-дескрипторе или на панели структуры Jmix UI.
Нажмите Add→Action в панели инспектора Jmix UI.

Показать код

<hbox id="buttonsPanel" classNames="buttons-panel"> (1)
    <button id="createBtn" action="departmentsTable.create"/>
    <button id="editBtn" action="departmentsTable.edit"/>
    <button id="removeBtn" action="departmentsTable.remove"/>
    <button id="infoBtn" action="departmentsTable.getInfo" icon="INFO_CIRCLE"/>
</hbox>
<treeDataGrid id="departmentsTable"
              hierarchyProperty="parentDepartment"
              width="100%"
              minHeight="20em"
              dataContainer="departmentsDc">
    <columns>
        <column property="name"/>
        <column property="hrManager"/>
    </columns>
    <actions>
        <action id="create" type="list_create"/> (2)
        <action id="edit" type="list_edit"/>
        <action id="remove" type="list_remove"/>
        <action id="getInfo" text="Get Info"/> (3)
    </actions>
</treeDataGrid>

1	Контейнер `hbox` для кнопок действий.
2	Стандартное действие `list_create`.
3	Пользовательское действие `getInfo`. Значение атрибута text используется как подпись в меню и на кнопке.

Контекстное меню предоставляет альтернативный способ доступа к действиям через правую кнопку мыши. Каждое действие представлено отдельным пунктом меню.

Используйте элемент contextMenu для настройки списка пунктов меню, организуя их с помощью разделителей и иерархической структуры.

Показать код

<treeDataGrid id="treeDataGrid"
              hierarchyProperty="parentDepartment"
              width="100%"
              minHeight="20em"
              dataContainer="departmentsDc">
    <columns>
        <column property="name"/>
        <column property="hrManager"/>
    </columns>
    <actions showInContextMenuEnabled="false"> (1)
        <action id="create" type="list_create"/>
        <action id="edit" type="list_edit"/>
        <action id="remove" type="list_remove"/>
        <action id="getInfo" text="Get Info"/>
        <action id="viewCalendar" text="Calendar"/>
    </actions>
    <contextMenu>
        <item action="treeDataGrid.create"/> (2)
        <item action="treeDataGrid.edit"/>
        <item action="treeDataGrid.remove"/>
        <separator/>
        <item text="More"> (3)
            <item action="treeDataGrid.getInfo" icon="INFO_CIRCLE"/>
            <item action="treeDataGrid.viewCalendar" icon="CALENDAR"/>
        </item>
    </contextMenu>
</treeDataGrid>

1	Скрыть все действия из меню. Или скрыть конкретное действие с помощью атрибута visible.
2	Явно добавить пункты меню для нужных действий.
3	Вложенные пункты создают иерархическую структуру.

Атрибуты

В Jmix существует множество общих атрибутов, которые выполняют одинаковые функции для всех компонентов. Ниже приведены атрибуты, специфичные для treeDataGrid:

Название

Описание

Значение по умолчанию

allRowsVisible

Если true, все строки отображаются сразу без полос прокрутки, фактически отключая виртуальную прокрутку. Это означает, что вместо рендеринга только видимых строк и подгрузки новых при прокрутке, все строки будут отображены в DOM одновременно.

Использование этой функции не рекомендуется для большого количества элементов, так как может вызвать проблемы с производительностью.

false

columnReorderingAllowed

Если true, позволяет пользователям изменять порядок столбцов.

false

detailsVisibleOnClick

Если true, включает отображение детализации элемента по клику мыши.

true

dropMode

Определяет, куда можно перетаскивать строки. Возможные значения: BETWEEN, ON_TOP, ON_TOP_OR_BETWEEN, ON_GRID. Может использоваться для изменения порядка строк или перетаскивания между таблицами.

–

editorBuffered

Если true, активирует буферизованный режим для встроенного редактирования, требующий подтверждения изменений кнопкой. В небуферизованном режиме изменения применяются сразу.

false

hierarchyProperty

Определяет имя атрибута сущности, ссылающегося на ту же сущность.

multiSort

Если true, включает сортировку по нескольким столбцам.

false

multiSortOnShiftClickOnly

Если true, множественная сортировка активируется только при клике по заголовку столбца с зажатой Shift.

false

multiSortPriority

Определяет, добавляется ли столбец в начало или конец списка сортировки. Возможные значения: PREPEND, APPEND.

PREPEND

nestedNullBehavior

Задает поведение при обработке вложенных свойств с null-значениями. Возможные значения: THROW, ALLOW_NULLS.

THROW

pageSize

Определяет размер страницы (количество элементов, загружаемых за раз).

50

rowDraggable

Если true, позволяет перетаскивать строки.

false

selectionMode

Устанавливает режим выделения. Возможные значения: SINGLE, MULTI.

SINGLE

showOrphans

Если false, потерянные записи не отображаются. Если true, такие записи отображаются на верхнем уровне как корневые элементы.

Потерянная запись - это дочерний элемент, ссылающийся на несуществующего родителя (часто возникает при частичной загрузке данных). Хотя скрытие таких записей логично при фильтрации, это может привести к пустым или неполным страницам. Не рекомендуется использовать treeDataGrid вместе с simplePagination.

false

Обработчики

В Jmix существует множество общих обработчиков, которые настраиваются одинаково для всех компонентов.

Ниже приведены обработчики, специфичные для treeDataGrid:

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

Название

Описание

CellFocusEvent

com.vaadin.flow.component.grid.CellFocusEvent возникает при фокусировке на ячейке таблицы. Соответствует DOM-событию grid-cell-focus.

CollapseEvent

com.vaadin.flow.component.treegrid.CollapseEvent возникает при сворачивании элемента.

ColumnReorderEvent

com.vaadin.flow.component.grid.ColumnReorderEvent возникает при изменении порядка столбцов. Соответствует DOM-событию column-reorder-all-columns.

ColumnResizeEvent

com.vaadin.flow.component.grid.ColumnResizeEvent возникает при изменении размера столбца пользователем. Соответствует DOM-событию column-drag-resize.

ExpandEvent

com.vaadin.flow.component.treegrid.ExpandEvent возникает при разворачивании элемента.

GridDragEndEvent

com.vaadin.flow.component.grid.dnd.GridDragEndEvent - событие окончания перетаскивания строк. Соответствует DOM-событию grid-dragend.

GridDragStartEvent

com.vaadin.flow.component.grid.dnd.GridDragStartEvent - событие начала перетаскивания строк. Соответствует DOM-событию grid-dragstart.

GridDropEvent

com.vaadin.flow.component.grid.dnd.GridDropEvent - событие сброса на таблицу или её строки. Соответствует DOM-событию grid-drop.

ItemClickEvent

com.vaadin.flow.component.grid.ItemClickEvent возникает при клике на элемент таблицы. Соответствует DOM-событию item-click.

ItemDoubleClickEvent

com.vaadin.flow.component.grid.ItemDoubleClickEvent возникает при двойном клике на элемент. Соответствует DOM-событию item-double-click.

SortEvent

com.vaadin.flow.data.event.SortEvent - событие изменения сортировки DataProvider. Генерируется SortNotifiers.

dataGenerator

Добавляет генератор данных для таблицы. Если генератор уже добавлен, ничего не делает. Смотрите интерфейс com.vaadin.flow.data.provider.HasDataGenerators.

dragFilter

Позволяет контролировать, какие именно строки можно перетаскивать, вместо включения перетаскивания всех строк через rowDraggable.

dropFilter

Позволяет контролировать, на какие строки можно сбрасывать элементы.

enterPressHandler

Обрабатывает нажатие клавиши Enter.

partNameGenerator

Генерирует части CSS-классов для ячеек на основе заданных условий. Позволяет настраивать внешний вид ячеек в зависимости от данных.

tooltipGenerator

Генерирует всплывающие подсказки для ячеек столбцов. Смотрите демонстрацию.

Элементы

Элементы treeDataGrid предоставляют широкие возможности для управления внешним видом, поведением и функциональностью столбцов как в целом, так и по отдельности.

Чтобы добавить элемент к выбранному компоненту, нажмите кнопку Add в панели инспектора Jmix UI.

columns

Элемент columns позволяет задавать набор отображаемых атрибутов и поведение для всех столбцов.

XML-элемент	`columns`
Атрибуты	exclude - includeAll - resizable - sortable
Элементы	column

XML-элемент

columns

Атрибуты

exclude - includeAll - resizable - sortable

Элементы

column

Table 1. Атрибуты
Название	Описание	Значение по умолчанию
exclude	Исключает указанные атрибуты из отображения. Несколько атрибутов разделяются запятыми. Например: `exclude = "id, version, sortValue"`.	–
includeAll	Если `true`, включает все атрибуты, указанные в фетч-плане соответствующего контейнера данных.	–
resizable	Если `true`, все столбцы можно изменять в ширину.	`false`
sortable	Если `true`, все столбцы поддерживают сортировку.	`true`

column

Элемент column определяет отдельный столбец. Атрибуты, заданные для отдельного столбца, имеют приоритет над атрибутами, заданными для всех столбцов.

XML-элемент	`column`
Атрибуты	autowidth - editable - filterable - flexGrow - footer - frozen - header - key - property - resizable - sortable - textAlign - visible - width
Обработчики	AttachEvent - DataGridColumnVisibilityChangedEvent - DetachEvent - partNameGenerator - renderer - tooltipGenerator
Элементы	Aggregation - FragmentRenderer - LocalDateRenderer - LocalDateTimeRenderer - NumberRenderer

XML-элемент

column

Атрибуты

autowidth - editable - filterable - flexGrow - footer - frozen - header - key - property - resizable - sortable - textAlign - visible - width

Обработчики

AttachEvent - DataGridColumnVisibilityChangedEvent - DetachEvent - partNameGenerator - renderer - tooltipGenerator

Элементы

Aggregation - FragmentRenderer - LocalDateRenderer - LocalDateTimeRenderer - NumberRenderer

Table 2. Атрибуты
Название	Описание	Значение по умолчанию
autoWidth	Если `true`, ширина столбца автоматически подстраивается под содержимое.	`false`
editable	Если `true`, столбец доступен для редактирования. Смотрите Встроенное редактирование.	`false`
filterable	Если `true`, включает фильтрацию для этого столбца. Смотрите Фильтрация по заголовкам столбцов.	`false`
flexGrow	Задает коэффициент растяжения столбца. При значении `0` ширина столбца фиксирована.	`0`
footer	Устанавливает текст в подвале столбца. Значением может быть как сам текст, так и ключ в пакете сообщений. Для ключа используйте префикс `msg://`.	–
frozen	Если `true`, фиксирует столбец (закрепляет его), чтобы он оставался видимым при горизонтальной прокрутке. Рекомендуется фиксировать столбцы слева направо.	`false`
header	Устанавливает заголовок столбца. Значением может быть как сам текст, так и ключ в пакете сообщений. Для ключа используйте префикс `msg://`.	–
key	Задает пользовательский идентификатор для связи с этим столбцом. Ключ можно использовать для получения столбца методом `getColumnByKey(String)`. Ключ должен быть уникальным в пределах таблицы и не может быть изменен после установки.	–
property	Указывает имя атрибута сущности для отображения в столбце. Это может быть атрибут корневой сущности `property = "user"` или атрибут дочерней сущности `property = "user.department.name"` (используйте точечную нотацию для навигации по графу объектов).	–
resizable	Если `true`, пользователь может изменять ширину столбца.	`false`
sortable	Если `true`, столбец поддерживает сортировку.	`false`
textAlign	Задает выравнивание текста. Возможные значения: `START`, `CENTER`, `END`.	`START`
visible	Если `true`, столбец видим.	`true`
width	Устанавливает ширину столбца в CSS-формате.	–

Table 3. Обработчики
Название	Описание
DataGridColumnVisibilityChangedEvent	Возникает при изменении видимости столбца через компонент gridColumnVisibility.
partNameGenerator	Генерирует части CSS-классов для этого столбца на основе условий. Позволяет настраивать внешний вид ячеек. Смотрите демонстрацию.
renderer	Отрисовывает содержимое столбца с использованием текста или компонентов. Смотрите текстовый рендерер и рендерер компонентов.
tooltipGenerator	Генерирует всплывающие подсказки для ячеек столбца. Смотрите демонстрацию.

Элемент contextMenu позволяет организовать пункты контекстного меню (по правому клику) в порядке, отличном от стандартного. Смотрите пример.

XML-элемент	`contextMenu`
Атрибуты	id - classNames - css - enabled - visible
Обработчки	AttachEvent - DetachEvent - GridContextMenuOpenedEvent - openedChangeEvent - dynamicContentHandler
Элементы	item - separator

XML-элемент

contextMenu

Атрибуты

id - classNames - css - enabled - visible

Обработчки

AttachEvent - DetachEvent - GridContextMenuOpenedEvent - openedChangeEvent - dynamicContentHandler

Элементы

item - separator

Table 4. Обработчики
Название	Описание
GridContextMenuOpenedEvent	Возникает при изменении состояния видимости контекстного меню. Может возвращать целевой элемент или идентификатор столбца, позволяя отображать пункты меню в зависимости от выбранного элемента.
openedChangeEvent	Возникает при изменении состояния видимости контекстного меню.
dynamicContentHandler	Обрабатывает динамическое обновление содержимого меню при открытии, например добавление пунктов меню или их содержимого. Смотрите соответствующий пример для `datagrid`.

Смотрите также

Смотрите документацию Vaadin для получения дополнительной информации.