Antd中s-table组件某字段进行排序
提前说明,s-table组件包含分页等功能
<s-table
ref="table"
:columns="columns"
:data="loadData"
bordered
:row-key="(record) => record.id"
>
</s-table>
而其中loadData为获取表数据的方法,且每次获取时都会自动传递一些数据,如当前页等:
const columns = [
{
title: '名称',
dataIndex: 'name'
}
}
// searchFormState中包含其他的查询条件字段
let searchFormState = reactive({})
const loadData = (parameter) => {
// parameter为该组件传入的数据
return xxxApi.jobPage(Object.assign(parameter, searchFormState)).then((data) => {
return data
})
}
以下是当前示例的parameter数据:
{
"current": 1,
"size": 10
}
得到的parameter如图:
sorter中进行比较
const columns = [
{
title: '新用户数',
dataIndex: 'newUser',
sorter: {compare: (a, b) => a.newUser - b.newUser},
align: 'center'
},
{
title: '充值金额',
dataIndex: 'payFee',
sorter: {compare: (a, b) => a.payFee - b.payFee},
align: 'center'
}
}
后端不需要改变,但是这样的话,顺序如下:
现有一组数据:0.88、2.00、3.00、4.00、5.00、6.00、1.88、6.00、8.00、8.00、9.00、7.00;分页:每页10条
默认情况下:
第一页:0.88、2.00、3.00、4.00、5.00、6.00、1.88、6.00、8.00、8.00;
第二页:9.00、7.00;
点击升序:
第一页:2.00、3.00、4.00、5.00、6.00、6.00、7.00、8.00、8.00、9.00;
第二页:0.88、1.88;
点击降序:
第一页:9.00、8.00、8.00、7.00、6.00、6.00、5.00、4.00、3.00、2.00;
第二页:1.88、0.88;
即它会将所有数据按照降序排列,之后进行分页,对每一页再进行升序降序排列;尝试了sorter: {compare: (a, b) => b.payFee - a.payFee},
得到的结果依旧如此。
开启sorter传入后端查询
在新增columns中每列属性中加入sorter: true
;
const columns = [
{
title: '新用户数',
dataIndex: 'newUser',
sorter: true,
align: 'center'
},
{
title: '充值金额',
dataIndex: 'payFee',
sorter: true,
align: 'center'
}
}
如果点击这两列进行排序(前提是点击了这两列进行升序/降序,不然不会传入数据)const loadData = (parameter) => {}
中得到的parameter还包含了sortField
与sortOrder
,当前点击充值金额列得到的parameter如下:
{
"current": 1,
"size": 10,
"sortField": "payFee",
"sortOrder": "ascend",
}
{
"current": 1,
"size": 10,
"sortField": "payFee",
"sortOrder": "descend",
}
则此时后端也需要接收这两个字段,如下:
// 排序字段
@ApiModelProperty(value = "排序字段,字段驼峰名称,如:payFee")
private String sortField;
// 排序方式
@ApiModelProperty(value = "排序方式,升序:ascend;降序:descend")
private String sortOrder;
此时查询逻辑如下:
if(ObjectUtil.isAllNotEmpty(param.getSortField(), param.getSortOrder())) {
// 当前排序字段是否合法
CommonSortOrderEnum.validate(param.getSortOrder());
// 根据sortField参数字段payFee进行排序
// 解释:orderBy(boolean condition, boolean isAsc, R column)
queryWrapper.orderBy(true, param.getSortOrder().equals(CommonSortOrderEnum.ASC.getValue()),
StrUtil.toUnderlineCase(param.getSortField()));
} else {
// 否则按创建时间升序
queryWrapper.lambda().orderByAsc(TableEntity::getCreateTime);
}
通用排序方式枚举类如下(注意,因为前端传入的是小写的,所以此处也用小写的):
@Getter
public enum CommonSortOrderEnum {
/** 升序 */
ASC("ascend"),
/** 降序 */
DESC("descend");
private final String value;
CommonSortOrderEnum(String value) {
this.value = value;
}
public static void validate(String value) {
boolean flag = ASC.getValue().equals(value) || DESC.getValue().equals(value);
// 如果上述是大写,则需要加入toLowerCase()方法将字段转换为小写
// boolean flag = ASC.getValue().toLowerCase().equals(value) || DESC.getValue().toLowerCase().equals(value);
// 但是同时在逻辑中不能再使用:param.getSortOrder().equals(CommonSortOrderEnum.ASC.getValue())
// 要修改为param.getSortOrder().equals(CommonSortOrderEnum.ASC.getValue().toLowerCase())
if(!flag) {
throw new CommonException("不支持该排序方式:{}", value);
}
}
}
此时查询出来结果与第一个方法不一致,此时不会先倒序排列再分页排序,该方法直接是在数据库中将所有数据按照sortOrder字段进行排序,之后再分页!!!
所以结果如下:
升序:
第一页:0.88、1.88、2.00、3.00、4.00、5.00、6.00、6.00、7.00、8.00;
第二页:8.00、9.00;
降序:
第一页:9.00、8.00、8.00、7.00、6.00、6.00、5.00、4.00、3.00、2.00;
第二页:1.88、0.88;