Компонент 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, а затем добавьте или удалите колонки.
Сортировка
Настройка сортировки такая же, как в dataGrid. Атрибут sortByGroupEnabled определяет, влияет ли сортировка на порядок групп.
Отключение группировки
Чтобы запретить пользователям группировку по определённой колонке, установите её свойству 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().
|
Настраиваемая колонка группировки
Чтобы использовать нестандартное значение для группировки, опишите новое свойство группировки в контроллере экрана. В следующем примере вводится новое свойство группировки, объединяющее имя и фамилию.
Такое синтетическое свойство не сортируется автоматически. Чтобы включить сортировку, укажите свойства сортировки в дескрипторе свойства группировки с помощью .withSortProperties(…).
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"))); (2)
customersGroupDataGrid.groupByKeys("fullName"); (3)
}
}
@Supply(to = "customersGroupDataGrid.fullName", subject = "renderer") (4)
protected Renderer<Customer> supplyRendererToFullNameColumn() {
return new TextRenderer<>(item -> item.getFirstName() + " " + item.getLastName());
}| 1 | Описывает новое свойство группировки, объединяющее firstName и lastName. |
| 2 | .withSortProperties(List.of("firstName", "lastName")) указывает компоненту, как сортировать синтетическое свойство. |
| 3 | Группировка по fullName по умолчанию. |
| 4 | Предоставляет запасной вариант отображения для колонки 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.
Атрибуты
Общие атрибуты выполняют одну и ту же роль для всех компонентов. Ниже перечислены атрибуты, общие с dataGrid, и атрибуты, уникальные для groupDataGrid:
Имя |
Описание |
По умолчанию |
|---|---|---|
Если |
|
|
Если |
|
|
Текст, отображаемый при отсутствии данных в таблице. Чтобы удалить текущее содержимое пустого состояния, укажите null. См. Отображение при отсутствии данных. |
– |
|
Устанавливает режим выделения элементов. Допустимые значения: |
|
|
Если данные в компоненте aggregatable, определяет, отображается ли строка агрегации выше или ниже остальных строк. Возможные значения: |
|
|
Если Использование этой функции не рекомендуется при большом количестве элементов, так как это может вызвать проблемы с производительностью. |
– |
|
Задаёт режим рендеринга колонок. В режиме |
|
|
Если |
|
|
Определяет, где можно оставить перетаскиваемую строку. Возможные значения: |
– |
|
Если |
|
|
Если |
|
|
Если |
|
|
Определяет, добавляется ли выбранная колонка в конец или в начало списка отсортированных колонок. Возможные значения: |
|
|
Задаёт поведение при обработке вложенных свойств, цепочка которых может содержать значения null. Возможные значения: |
|
|
Определяет размер страницы — количество элементов, получаемых от поставщика данных за один раз. |
|
|
Если |
|
|
Если
Если
|
|
Обработчики
Общие обработчики настраиваются одинаково для всех компонентов. Ниже перечислены обработчики, общие с dataGrid, и обработчики, уникальные для groupDataGrid:
|
Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N). |
Имя |
Описание |
|---|---|
|
|
Срабатывает при свёртывании группы. |
|
|
|
|
|
Срабатывает при развёртывании группы. |
|
|
|
|
|
|
|
Срабатывает при щелчке по строке, соответствующей элементу группы. |
|
Срабатывает при двойном щелчке по строке, соответствующей элементу группы. |
|
Срабатывает при изменении группировки — добавлении или удалении колонок. |
|
|
|
|
|
Событие выбора, унифицирующее доступ к событию выбора для компонентов с множественным и одиночным выбором (в том числе когда требуется только один выбранный элемент). |
|
|
|
Добавляет генератор данных для таблицы. Если генератор уже добавлен, ничего не делает. См. интерфейс |
|
Позволяет определить, какие строки можно перетаскивать, вместо включения этой возможности для всех строк с помощью rowsDraggable. |
|
Позволяет определить, какие строки являются допустимыми целями для сброса. |
|
Обрабатывает событие нажатия пользователем клавиши Enter. |
|
Генерирует части имён CSS-классов для элементов группы на основе заданных условий. Позволяет настраивать внешний вид элементов группы. |
|
Создаёт всплывающую подсказку для группы на основе заданных условий. |
|
Задаёт предикат для проверки, может ли пользователь выбрать или снять выбор с конкретного элемента таблицы. Предикат получает экземпляр элемента и должен возвращать |
|
Генерирует части имён CSS-классов для ячеек на основе заданных условий. Позволяет настраивать внешний вид ячеек в зависимости от отображаемых данных. |
|
Создаёт всплывающую подсказку для ячейки колонки на основе заданных условий. См. интерактивный пример. |
Элементы
|
Чтобы добавить элемент к выбранному компоненту, нажмите кнопку Add в панели инспектора Jmix UI. |
groupBy
Элемент groupBy содержит один или несколько элементов columnRef, определяющих, по каким колонкам выполняется группировка.
columns
Элемент columns содержит отдельные элементы column и задаёт набор атрибутов, общих для этих колонок.