Компонент GroupDataGrid
Компонент groupDataGrid — более функциональная версия базовой таблицы данных с широкими возможностями группировки строк. Он группирует строки по повторяющимся значениям столбца, объединяя их в сворачиваемые блоки, с поддержкой многоуровневой группировки и изменения порядка группировки перетаскиванием.
Основы
Для начала работы установите дополнение, а затем добавьте компонент через палитру Add Component в Дизайнере экранов Studio.
В следующем примере клиенты группируются по значениям столбца Grade.
XML code
<view xmlns="http://jmix.io/schema/flowui/view" xmlns:groupg="http://jmix.io/schema/groupgrid/ui"
title="msg://basicGroupGridView.title"> (1)
<data>
<collection id="customersDc"
class="com.company.groupdatagridex1.entity.Customer"
fetchPlan="_base">
<loader id="customersDl">
<query>
<![CDATA[select e from Customer e]]>
</query>
</loader>
</collection>
</data>
<facets>
<dataLoadCoordinator auto="true"/>
</facets>
<layout>
<groupg:groupDataGrid id="customersGroupDataGrid"
dataContainer="customersDc"
minWidth="100px"
width="100%">
<groupg:groupBy>
<groupg:columnRef key="grade"/> (2)
</groupg:groupBy>
<groupg:columns>
<groupg:groupColumn header="Grade"/> (3)
<groupg:column property="firstName"/>
<groupg:column property="lastName"/>
<groupg:column property="email"/>
<groupg:column property="country"/>
<groupg:column property="grade"/>
</groupg:columns>
</groupg:groupDataGrid>
</layout>
</view>| 1 | Если компонент добавляется вручную, а не через палитру Add Component, объявите пространство имён groupg. |
| 2 | Начальная группировка выполняется по свойству grade; можно добавить дополнительные уровни группировки. |
| 3 | Определение столбца группировки. |
Привязка данных
Привязка данных — это связывание визуального компонента с контейнером данных. Чтобы связать компонент с данными, используйте атрибут dataContainer со ссылкой на контейнер коллекции. См. пример выше.
Элемент группы
Элементы группы — это специальные записи, создаваемые при группировке. Они отображаются как строки, содержащие только заголовок группы.
Для отображения элементов группы уровень привязки данных создаёт временный пустой экземпляр сущности или DTO. Этот экземпляр не добавляется в контейнер коллекции и существует только в памяти на время группировки.
Скрытие счётчика элементов группы
По умолчанию элементы группы отображают количество вложенных записей. Чтобы скрыть это число, используйте свойство displayItemCount элемента groupColumn.
Многоуровневая группировка
Компонент поддерживает группировку по нескольким столбцам. Щёлкните значок столбца группировки, чтобы открыть диалог Group by, а затем добавьте или удалите столбцы.
Отключение группировки
Чтобы запретить пользователям группировку по определённому столбцу, установите его свойству groupAllowed значение false. Это убирает столбец из диалога Group by. В примере ниже столбец Country не может быть сгруппирован:
XML code
<groupg:groupDataGrid id="customersGroupDataGrid"
dataContainer="customersDc"
minWidth="100px"
width="100%">
<groupg:groupBy>
<groupg:columnRef key="grade"/>
</groupg:groupBy>
<groupg:columns>
<groupg:groupColumn header="Grade"/>
<groupg:column property="firstName"/>
<groupg:column property="lastName"/>
<groupg:column property="email"/>
<groupg:column property="country" groupAllowed="false"/>
<groupg:column property="grade"/>
</groupg:columns>
</groupg:groupDataGrid>Чтобы полностью отключить группировку для пользователей, установите displayColumnsGrouperOnIconClick="false" на элементе groupColumn.
Группировку по умолчанию можно всё равно задать с помощью элемента groupBy или программно, вызвав метод groupBy().
|
Настраиваемый столбец группировки
Чтобы использовать нестандартное значение для группировки, опишите новое свойство группировки в контроллере экрана. В следующем примере вводится новое свойство группировки, объединяющее имя и фамилию.
XML code
<groupg:groupDataGrid id="customersGroupDataGrid"
dataContainer="customersDc"
minWidth="100px"
width="100%">
<groupg:columns>
<groupg:groupColumn key="group" header="Full name"/> <!-- 1 -->
<groupg:column key="fullName" header="Full name"/>
<groupg:column property="email"/>
<groupg:column property="country"/>
<groupg:column property="grade"/>
</groupg:columns>
</groupg:groupDataGrid>Java code
@ViewComponent
private GroupDataGrid<Customer> customersGroupDataGrid;
@Subscribe
public void onInit(InitEvent event) {
GroupDataGridItems<Customer> items = customersGroupDataGrid.getItems();
if (items != null) {
items.addGroupPropertyDescriptor( (1)
new BaseGroupPropertyDescriptor<Customer>("fullName",
context -> context.getItem().getFirstName() + " " + context.getItem().getLastName())
.withSortProperties(List.of("firstName", "lastName")));
customersGroupDataGrid.groupByKeys("fullName"); (2)
}
}
@Supply(to = "customersGroupDataGrid.fullName", subject = "renderer") (3)
protected Renderer<Customer> supplyRendererToFullNameColumn() {
return new TextRenderer<>(item -> item.getFirstName() + " " + item.getLastName());
}| 1 | Описывает новое свойство группировки, объединяющее firstName и lastName. |
| 2 | Группировка по fullName по умолчанию. |
| 3 | Предоставляет запасной вариант отображения для столбца Full Name, когда он не участвует в группировке; без этого столбец будет отображаться пустым. |
Экспорт в Excel
Функциональность экспорта предоставляется бесплатным дополнением Grid Export Actions, которое поддерживает все виды таблиц: groupDataGrid, dataGrid и treeDataGrid.
Дополнение предоставляет три варианта экспорта. Они влияют как на охват данных, так и на формат итоговой таблицы:
-
Все строки — экспортирует все строки, разворачивая группировку в плоский список.
-
Текущая страница — экспортирует только видимые строки, сохраняя структуру группировки как в таблице.
-
Выбранные строки — экспортирует выбранные строки, разворачивая группировку в плоский список.
Оформление
Темы
Настройте темы с помощью свойства themeNames. Можно применять несколько тем одновременно. Темы такие же, как в dataGrid.
Иконка группировки
Компонент отображает + для свёрнутой группы и - для развёрнутой. Чтобы изменить иконки, добавьте нужные значки в таблицу стилей приложения. Замените значения content по умолчанию на коды нужных символов (например, e7c1 и e7bf из коллекции иконок шрифта Vaadin):
vaadin-grid-tree-toggle.jmix-group-toggle {
&::part(toggle)::before {
content: "\e7c1";
}
&[expanded]::part(toggle)::before {
content: "\e7bf";
}
}
| Подробнее см. стилизуемые части компонентов. |
Иконка столбца группировки
Иконка столбца группировки настраивается через атрибут groupIcon элемента groupColumn. Чтобы скрыть иконку, установите groupIconVisible в значение false.
Атрибуты
В Jmix существует множество общих атрибутов, которые выполняют одинаковые функции для всех компонентов. Ниже перечислены атрибуты, общие с dataGrid, а также уникальные для groupDataGrid:
Название |
Описание |
Значение по умолчанию |
|---|---|---|
Если значение |
|
|
Если значение |
|
|
Определяет текст, отображаемый когда таблица данных пуста. Используйте |
– |
|
Устанавливает режим выделения элементов. Допустимые значения: |
|
|
Определяет положение строки с агрегированными данными. Допустимые значения: |
|
|
Если значение равно Использование этой функции не рекомендуется при работе с большим количеством элементов, так как это может вызвать проблемы с производительностью. |
– |
|
Задаёт режим рендеринга столбцов. В режиме |
|
|
Если значение |
|
|
Определяет, в каких строках возможно выполнение операции перетаскивания (drop). Допустимые значения: |
– |
|
При значении - пользователь должен подтверждать изменения нажатием кнопки подтверждения; - предусмотрена возможность отмены внесённых изменений. В небуферизированном режиме изменения применяются сразу без необходимости подтверждения. |
|
|
При значении |
|
|
При значении |
|
|
Определяет, добавляется ли выбранный столбец в начало или конец списка сортировки. Допустимые значения: |
|
|
Определяет поведение при обработке вложенных свойств, которые могут содержать значения null в цепочке свойств. Допустимые значения: |
|
|
Определяет размер страницы (количество элементов, загружаемых из источника данных за один раз). |
|
|
Если значение |
|
|
Если
Если
|
|
Обработчики
В Jmix существует множество общих обработчиков, которые настраиваются одинаково для всех компонентов. Ниже перечислены обработчики, общие с dataGrid, а также уникальные для groupDataGrid:
|
Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N). |
Название |
Описание |
|---|---|
|
|
Возникает при сворачивании группы. |
|
|
|
|
|
Возникает при разворачивании группы. |
|
|
|
|
|
|
|
Возникает при клике на строку, соответствующую элементу группы. |
|
Возникает при двойном клике на строку, соответствующую элементу группы. |
|
Возникает при изменении группировки — добавлении или удалении столбцов. |
|
|
|
|
|
Событие выбора, которое унифицирует доступ к событию выбора для компонентов с множественным и одиночным выбором (в том числе когда требуется только один выбранный элемент). |
|
|
|
Добавляет генератор данных для таблицы. Если генератор уже был добавлен, действие не выполняется. Подробнее см. в интерфейсе |
|
Позволяет задавать, какие именно строки можно перетаскивать, вместо активации этой функции для всех строк через атрибут rowsDraggable. |
|
Позволяет задавать, какие именно строки могут быть целями для операции перетаскивания (drop targets). |
|
Обрабатывает событие нажатия пользователем клавиши Enter. |
|
Генерирует части CSS-классов для элементов группы на основе заданных условий. Это позволяет настраивать внешний вид элементов группы. |
|
Генерирует всплывающую подсказку для группы на основе заданных условий. |
|
Устанавливает предикат, проверяющий, можно ли пользователю выбрать или снять выбор для конкретного элемента в таблице. Предикат получает экземпляр элемента и возвращает |
|
Генерирует части CSS-классов для ячеек на основе заданных условий. Это позволяет настраивать внешний вид ячеек в зависимости от отображаемых данных. |
|
Функция создает всплывающие подсказки (tooltip) для ячеек столбца на основе заданных условий. Смотрите рабочий пример в живой демонстрации. |
Элементы
|
Чтобы добавить элемент в выбранный компонент, нажмите кнопку Add в панели инспектора Jmix UI. |
groupBy
Элемент groupBy содержит один или несколько элементов columnRef, определяющих, по каким столбцам выполняется группировка.
columns
Элемент columns содержит отдельные элементы column и задаёт набор атрибутов, общих для этих столбцов.