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

2024-03-14 13:52

本文主要是介绍Antd中s-table组件某字段进行排序,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

提前说明,s-table组件包含分页等功能

	<s-tableref="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还包含了sortFieldsortOrder,当前点击充值金额列得到的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;

这篇关于Antd中s-table组件某字段进行排序的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/808628

相关文章

利用python实现对excel文件进行加密

《利用python实现对excel文件进行加密》由于文件内容的私密性,需要对Excel文件进行加密,保护文件以免给第三方看到,本文将以Python语言为例,和大家讲讲如何对Excel文件进行加密,感兴... 目录前言方法一:使用pywin32库(仅限Windows)方法二:使用msoffcrypto-too

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

QT进行CSV文件初始化与读写操作

《QT进行CSV文件初始化与读写操作》这篇文章主要为大家详细介绍了在QT环境中如何进行CSV文件的初始化、写入和读取操作,本文为大家整理了相关的操作的多种方法,希望对大家有所帮助... 目录前言一、CSV文件初始化二、CSV写入三、CSV读取四、QT 逐行读取csv文件五、Qt如何将数据保存成CSV文件前言

通过Spring层面进行事务回滚的实现

《通过Spring层面进行事务回滚的实现》本文主要介绍了通过Spring层面进行事务回滚的实现,包括声明式事务和编程式事务,具有一定的参考价值,感兴趣的可以了解一下... 目录声明式事务回滚:1. 基础注解配置2. 指定回滚异常类型3. ​不回滚特殊场景编程式事务回滚:1. ​使用 TransactionT

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J

Java中使用Hutool进行AES加密解密的方法举例

《Java中使用Hutool进行AES加密解密的方法举例》AES是一种对称加密,所谓对称加密就是加密与解密使用的秘钥是一个,下面:本文主要介绍Java中使用Hutool进行AES加密解密的相关资料... 目录前言一、Hutool简介与引入1.1 Hutool简介1.2 引入Hutool二、AES加密解密基础

SpringSecurity6.0 如何通过JWTtoken进行认证授权

《SpringSecurity6.0如何通过JWTtoken进行认证授权》:本文主要介绍SpringSecurity6.0通过JWTtoken进行认证授权的过程,本文给大家介绍的非常详细,感兴趣... 目录项目依赖认证UserDetailService生成JWT token权限控制小结之前写过一个文章,从S