GroupDataGrid 组件
groupDataGrid 组件是比基本的表格更强大的版本，能够进行行内分组。可以根据重复的列值将行分组成为可折叠的分组块，支持多层分组和拖动重排控制。
基本用法
下面的例子中，用户按 Grade 列进行了分组：
XML 代码
<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 属性并引用 集合数据容器。请参考上面的示例。
分组项
禁用分组
如需禁止用于基于特定列进行分组，可以设置该列的 groupAllowed 属性为 false。这样就不会在 Group by 对话框中显示该列。下面的示例中，不允许按 Country 列分组：
XML 代码
<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>如需禁止终端用户使用分组功能，设置 groupColumn 元素的 displayColumnsGrouperOnIconClick="false"。
默认的分组仍然可以通过 groupBy 元素声明或 groupBy() 方法编程式设置。
|
自定义分组列
如需使用自定义分组值，在视图控制器中添加新的分组属性描述。以下示例引入了一个将名字和姓氏结合的新分组属性。
XML 代码
<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 代码
@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 | 为“全名”列提供一个渲染回调，可以在不分组时显示内容。否则，不分组时列显示为空。 |
导出 Excel
导出功能由免费的 表格导出操作 扩展组件提供，该扩展组件支持所有表格类型：groupDataGrid、dataGrid 和 treeDataGrid。
该扩展组件提供三种导出选项。有不同的导出范围以及生成 Excel 的格式：
-
All Rows – 导出所有行并展平分组。
-
Current Page – 仅导出当前可见行，同时 保留表格中显示的分组结构。
-
Selected Rows – 导出当前选中的行并展平分组。
样式
分组标签
组件中折叠的分组组显示 +，展开的分组显示 -。如需自定义图标，可以将图标添加到应用程序样式中。把默认的 content 值替换为所需的图标字符代码（例如，使用 Vaadin 字体图标 集合中的 e7c1 和 e7bf）：
vaadin-grid-tree-toggle.jmix-group-toggle {
&::part(toggle)::before {
content: "\e7c1";
}
&[expanded]::part(toggle)::before {
content: "\e7bf";
}
}
| 参考 组件的可样式化 parts。 |
分组列图标
分组列图标可通过 groupColumn 元素的 groupIcon 属性进行自定义。如需隐藏图标，将 groupIconVisible 设置为 false。
XML 属性
通用属性 对所有组件都是一样的配置。以下是与 dataGrid 数据网格 共享的属性以及 groupDataGrid 特有的属性：
名称 |
描述 |
默认值 |
|---|---|---|
如果为 |
|
|
如果为 |
|
|
表格为空时显示的文本。使用 null 可移除当前的空状态内容。参阅 空状态。 |
– |
|
设置选择模式。支持： |
|
|
|
||
如果为 不建议在条目数量较大时使用此功能，因为可能会导致性能问题。 |
– |
|
设置列渲染模式。在 |
|
|
如果为 |
|
|
确定可以进行拖放的行。可选值： |
– |
|
如果为 |
|
|
如果为 |
|
|
如果为 |
|
|
设置被点击的列是添加到已排序列列表的末尾还是开头。可选值： |
|
|
设置当解析嵌套属性时（属性链中可能包含 null 值）的行为。可选值： |
|
|
设置页面大小，即一次从数据提供者获取的条目数量。 |
|
|
如果为 |
|
|
如果为
如果为
|
|
事件和处理器
通用事件和处理器 对所有组件都是一样的配置。以下是与 dataGrid 数据网格 共享的处理器以及 groupDataGrid 特有的处理器：
|
在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。 |
名称 |
描述 |
|---|---|
|
|
当分组折叠时触发。 |
|
|
|
|
|
当分组展开时触发。 |
|
|
|
|
|
|
|
当单击分组项内的行时触发。 |
|
当双击分组项内的行时触发。 |
|
当分组发生变化（添加或移除列）时触发。 |
|
|
|
|
|
选择事件，统一了多选和单选事件（在只需要单个选中条目的情况下）。 |
|
|
|
为表格添加数据生成器。如果该生成器已添加，则不执行任何操作。参考 |
|
允许控制哪些特定行可以被拖拽，而不是通过 rowsDraggable 使所有行都可拖拽。 |
|
允许控制哪些特定行是有效的放置目标。 |
|
处理用户按下 Enter 键时的事件。 |
|
根据给定条件为分组项生成 CSS 类名的 parts。支持自定义分组项。 |
|
根据给定条件为分组生成 tooltip。 |
|
设置一个判断，用于检查表格中的特定项是否可由用户选择或取消选择。该方法接收一个条目实例，如果用户可以更改该条目的选择状态则返回 |
|
根据给定条件为单元格生成 CSS 类名的 parts。支持根据所显示的数据自定义单元格外观。 |
|
根据给定条件为列单元格生成 tooltip。参考 在线演示。 |
