treeDataGrid

treeDataGrid отображает иерархические данные в таблице с расширяемыми строками.

XML-элемент

treeDataGrid

Java-класс

TreeDataGrid

Обзор

Иерархическая таблица

Основы

ДЕМО

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

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

<data>
    <collection id="tasksDc"
                class="io.jmix.uisamples.entity.Task">
        <fetchPlan extends="_local">
            <property name="parentTask" fetchPlan="_local"/>
            <property name="assignee" fetchPlan="_local"/>
        </fetchPlan>
        <loader id="tasksDl">
            <query>
                <![CDATA[select e from Task e]]>
            </query>
        </loader>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
    <treeDataGrid id="taskDataGrid"
                  dataContainer="tasksDc"
                  hierarchyProperty="parentTask"
                  width="100%"
                  minHeight="20em">
        <columns>
            <column property="name"/>
            <column property="dueDate"/>
            <column property="assignee"/>
        </columns>
    </treeDataGrid>
tree data grid basics

Контейнер коллекции tasksDc хранит сущности Task. treeDataGrid связывается с контейнером атрибутом dataContainer, а элемент columns задаёт отображаемые атрибуты сущности.

Действия

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

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

  1. Выберите компонент в XML-дескрипторе или на панели структуры Jmix UI.

  2. Нажмите 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 Вложенные пункты создают иерархическую структуру.

Варианты темы

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

Вариант Описание Поддерживается в

no-border

Удаляет внешнюю границу вокруг сетки.

Aura, Lumo

no-row-borders

Удаляет горизонтальные границы между строками.

Aura, Lumo

column-borders

Добавляет вертикальные границы между колонками.

Aura, Lumo

row-stripes

Чередует цвета фона строк для улучшения читаемости.

Aura, Lumo

compact

Уменьшает высоту строк и интервалы.

Aura, Lumo

wrap-cell-content

Позволяет содержимому ячеек переноситься на несколько строк вместо обрезки.

Aura, Lumo

Атрибуты

treeDataGrid имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

allRowsVisible

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

false

columnReorderingAllowed

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

false

detailsVisibleOnClick

Если true, позволяет отображать Детали товара при щелчке мыши.

true

dropMode

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

—

editorBuffered

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

false

emptyStateText

Устанавливает пустой текст состояния.

—

hierarchyProperty

Определяет имя атрибута сущности, которое относится к той же сущности.

—

metaClass

Задаёт метакласс.

—

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

treeDataGrid имеет следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - dataContainer - enabled - height - maxHeight - maxWidth - minHeight - minWidth - tabIndex - themeNames - visible - width

Обработчики

treeDataGrid имеет следующие уникальные обработчики:

Имя Описание

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 срабатывает после завершения перетаскивания строк dataGrid. Соответствует DOM-событию grid-dragend.

GridDragStartEvent

com.vaadin.flow.component.grid.dnd.GridDragStartEvent срабатывает при начале перетаскивания строк dataGrid. Соответствует 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. Событие отправляют реализации SortNotifier.

dataGenerator

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

dragFilter

Определяет, какие строки можно перетаскивать, вместо включения этой возможности для всех строк с помощью rowDraggable.

dropFilter

Определяет, на какие строки можно поместить перетаскиваемый элемент.

enterPressHandler

Обрабатывает событие, когда пользователь нажимает клавишу Enter.

partNameGenerator

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

tooltipGenerator

Создаёт всплывающую подсказку для ячейки колонки на основе заданных условий. См. интерактивный пример.

treeDataGrid имеет следующие общие обработчики:

AttachEvent - BlurEvent - DetachEvent - FocusEvent

Элементы

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

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

columns

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

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

Элементы

Агрегация - FragmentRenderer - Рендереры dataGrid
Table 2. Атрибуты

Название

Описание

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

autoWidth

Если true, ширина колонки автоматически подстраивается под содержимое.

false

editable

Если true, колонка доступен для редактирования. Смотрите Встроенное редактирование.

false

filterable

Если true, включает фильтрацию для этого колонки. Смотрите Фильтрация по заголовкам колонок.

false

flexGrow

Задаёт коэффициент растяжения колонки. При значении 0 ширина колонки фиксирована.

0

footer

Устанавливает текст в подвале колонки. Значением может быть как сам текст, так и ключ в пакете сообщений. Для ключа используйте префикс msg://.

–

frozen

Если true, фиксирует колонка (закрепляет его), чтобы он оставался видимым при горизонтальной прокрутке. Рекомендуется фиксировать колонки слева направо.

false

header

Устанавливает заголовок колонки. Значением может быть как сам текст, так и ключ в пакете сообщений. Для ключа используйте префикс msg://.

–

key

Задаёт пользовательский идентификатор для связи с этим колонкой. Ключ можно использовать для получения колонки методом getColumnByKey(String).

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

—

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

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

XML-элемент

contextMenu

Атрибуты

id - classNames - css - enabled - visible

Обработчки

AttachEvent - DetachEvent - GridContextMenuOpenedEvent - openedChangeEvent - dynamicContentHandler

Элементы

элемент - разделитель
Table 4. Обработчики

Название

Описание

GridContextMenuOpenedEvent

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

openedChangeEvent

Возникает при изменении состояния видимости контекстного меню.

dynamicContentHandler

Обрабатывает динамическое обновление содержимого меню при открытии, например добавление пунктов меню или их содержимого. Смотрите соответствующий пример для datagrid.

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