Fastball数据表格
最常见的多数据展示方式, 主要用于结构化的行列数据的展示.
配置说明
注解配置
- 配置注解:
@dev.fastball.ui.components.table.config.TableConfig - 属性说明:
- title:
- 类型:
String - 默认值:
"" - 配置作用: 该表格的标题, 暂不支持动态, 为空时标题不显示
- 类型:
- size:
- 类型:
Enum<TableSize>- Small: 紧凑型
- Middle: 中等
- Large: 松散型
- 默认值:
Small - 配置作用: 列表的大小
- 类型:
- childrenFieldName:
- 类型:
String - 默认值:
"" - 配置作用: 如果希望是一个树状列表, 可以配置自己录字段名, 并保证该字段类型为当前类型的集合, 可参见树形表格示例
- 类型:
- keywordSearch:
- 类型:
boolean - 默认值:
false - 配置作用: 是否支持关键字搜索, 如开启, 入参需要使用
dev.fastball.ui.components.table.param.TableSearchParam包装, 可参见表格入参包装
- 类型:
- rowExpandedComponent:
- 类型:
Class<Component> - 默认值:
Component - 配置作用: 如果希望行内可以展开, 比如展示当前记录其他信息详情, 或者嵌套列表等, 可以配置该字段为嵌套内容的组件, 可参见可展开表格示例
- 类型:
- title:
记录操作配置
- RecordAction:
- 是否支持: 是
- 作用: 生成列表行后的按钮, 操作相关详见操作
表格入参包装
表格有一些内置的功能, 比如分页, 排序, 关键字搜索等, 但是这些行为背后都是需要业务处理的, 所以入参就需要包含这些信息.
因此 Fastball Table 提供了入参的包装, 可以获取这些额外参数, 此部分示例工程有包含, 可以参见示例代码:
java
@UIComponent
@TableConfig(keywordSearch = true)
public class EmployeeWrapperTable implements SearchTable<Employee, TableSearchParam<UserQuerier>> {
private final EmployeeRepository employeeRepo;
@Override
public DataResult<Employee> loadData(TableSearchParam<UserQuerier> searchParam) {
// 关键字搜索
// String keyword = searchParam.getKeyword();
// 搜索框内的查询条件
// UserQuerier userQuerier = searchParam.getSearch();
// 排序规则
// Map<String, SortOrder> sortFields = searchParam.getSortFields();
// 当前页号
// Long currentPage = searchParam.getCurrent();
// 分页每页数据量
// Long pageSize = searchParam.getPageSize();
Collection<Employee> data = employeeRepo.findByQuerier(searchParam);
return DataResult.build(data);
}
}
列排序
如果某些需要排序, 可以再模型字段上增加注解 @SortableColumn 来声明, 同时使用入参包装, 则可以通过入参的 getSortFields() 来获取排序字段.
列数据可复制
如果某些列希望数据可以被复制, 可以在模型字段上增加注解 @CopyableColumn 来声明, 则会自动生成可复制的字段展示.
基础表格
- 实现接口:
dev.fastball.ui.components.table.Table<Model> - 使用场景: 可用于普通行列数据的展示与操作, 且无搜索需求
- 方法说明:
DataResult<Model> loadData(): 用于返回列表的数据
- 示例代码链接:
java
@UIComponent
public class OrgTreeTable implements Table<Org> {
private final OrgRepository orgRepository;
@Override
public DataResult<Org> loadData() {
return DataResult.build(orgRepository.findRoot());
}
}
可搜索表格
- 实现接口:
dev.fastball.ui.components.table.SearchTable<Model, Search> - 使用场景: 可用于普通行列数据的展示与操作
- 方法说明:
DataResult<Model> loadData(Search): 用于返回列表的数据, 入参是搜索条件
- 示例代码链接:
java
@UIComponent
public class EmployeeTable implements SearchTable<Employee, UserQuerier> {
private final EmployeeRepository employeeRepo;
@Override
public DataResult<Employee> loadData(UserQuerier querier) {
Collection<Employee> data = employeeRepo.findByQuerier(querier);
return DataResult.build(data);
}
}
有参表格
- 实现接口:
dev.fastball.ui.components.table.VariableTable<Model, Param> - 使用场景: 用于有入参的列表, 但无搜索条件, 比如基于组织查询下级组织列表
- 方法说明:
DataResult<Model> loadData(Param): 用于返回列表的数据
- 示例代码链接:
java
@UIComponent
public class OrgEmployeeTable implements VariableTable<Employee, Org> {
private final EmployeeRepository employeeRepo;
@Override
public DataResult<Employee> loadData(Org org) {
Collection<Employee> data = employeeRepo.findByOrgId( org != null ? org.getId() : null);
return DataResult.build(data);
}
}
有参可搜索表格
- 实现接口:
dev.fastball.ui.components.table.VariableTable<Model, Search, Param> - 使用场景: 用于有入参且有搜索条件的列表, 比如基于组织查询组织下的所有用户
- 方法说明:
DataResult<Model> loadData(Search, Param): 用于返回列表的数据, 入参为搜索条件以及表格的参数
- 示例代码链接:
java
@UIComponent
@RequiredArgsConstructor
public class OrgEmployeeTable implements VariableSearchTable<Employee, UserQuerier, Org> {
private final EmployeeRepository employeeRepo;
@Override
public DataResult<Employee> loadData(UserQuerier querier, Org org) {
Collection<Employee> data = employeeRepo.findByQuerierAndOrgId(querier, org != null ? org.getId() : null);
return DataResult.build(data);
}
}
树形表格
我们希望以表格形式展示树形数据, 可以声明 @TableConfig.childrenFieldName 字段, 让列表拥有向下展开的能力. 界面展示效果如下:
此部分示例工程有包含, 可以参见示例代码:
java
@UIComponent
@TableConfig(
childrenFieldName = "subOrg"
)
public class OrgTreeTable implements Table<Org> {
private final OrgRepository orgRepository;
@Override
public DataResult<Org> loadData() {
return DataResult.build(orgRepository.findRootAndLoadSubOrg());
}
}
可展开表格
如果希望行内可以展开, 比如展示当前记录其他信息详情, 或者嵌套列表等, 可以配置 @TableConfig.rowExpandedComponent 字段为嵌套内容的组件, 让列表拥有向下展开的能力. 界面展示效果如下:
此部分示例工程有包含, 可以参见示例代码:
java
@UIComponent
@TableConfig(
rowExpandedComponent = EmployeeDescription.class
)
public class EmployeeExpandedTable implements Table<Employee> {
private final EmployeeRepository employeeRepository;
@Override
public DataResult<Employee> loadData() {
return DataResult.build(employeeRepository.findAll());
}
}