Antd中s-table组件某字段进行排序

时间：2024-03-14 08:00:07

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如图：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；