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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ref和reactive的区别?

Ref 和 Reactive 是两种不同的编程概念&#xff0c;通常在响应式编程中经常提到。 Ref&#xff08;引用&#xff09;是指对某个数据的引用或者指针&#xff0c;类似于指向某个内存地址的指针。在编程中&#xff0c;我们可以通过引用来访问、修改特定的数据。Ref 通常用于管理和…

线性表的顺序存储实验

附 录 #include<stdio.h> #include<stdlib.h>typedef struct {double* data;int length; }Sqlist;void initSqlist(Sqlist* L, int n) {L->data (double*)malloc(n * sizeof(double)); if (L->data NULL){printf("内存分配失败\n");exit(1);}pri…

react实现表格多条件搜索

创建一个React组件来渲染表格及搜索功能。可以使用函数式组件或者类组件。 在组件的状态中定义搜索条件的值。可以使用useState钩子函数来定义和更新搜索条件的状态。 在组件中创建一个表单&#xff0c;包含多个输入框或下拉列表等用于输入搜索条件的表单元素。 为每个表单元…

boost 压缩与解压缩流

boost 压缩与解压缩流&#xff08;zip、zip2、gzip、lzma、zstd压缩方式&#xff09; #include <boost/iostreams/filtering_stream.hpp> #include <boost/iostreams/filter/zlib.hpp> #include <boost/iostreams/filter/bzip2.hpp> #include <boost/ios…

MTK安卓开发板_联发科开发板评估套件_安卓主板硬件开发

在介绍开发板之前&#xff0c;让我们先来区分一下核心板和开发板的区别。核心板是一种集成度高、功能完整的计算模块&#xff0c;搭载系统&#xff0c;简化了外围接口&#xff0c;体积尺寸相对较小&#xff0c;主要适用于嵌入式系统。而开发板由核心板底板组成&#xff0c;提供…

Python实战:采集全国5A景点名单

本文将以采集全国 5A 景点名单为例&#xff0c;详细介绍如何使用 Python 进行数据采集。 本文采集到全国340家5A景区的名单&#xff0c;包括景区名称、地区、 A级、评定年份这些字段。 一、分析数据源 为了获取权威数据&#xff0c;我们来到主管部门的官方网站&#xff0c;在右…

Java集合中经典的 5种设计模式,打死也要记住啊!

集合 一、 迭代器模式(Iterator Pattern)二、 工厂模式(Factory Pattern)三、 装饰器模式(Decorator Pattern)四、 适配器模式(Adapter Pattern)五、 组合模式(Composite Pattern) Java 集合框架中的 List、Set、Map 以及其实现类都使用了多种经典的设计模式 一、 迭代器模式(I…

测试用例是什么?怎么写?不会测试用例的看过来,

前言 今天笔者想和大家来聊聊测试用例&#xff0c;这篇文章主要是想要写给测试小伙伴们的&#xff0c;因为我发现还是有很多小伙伴在遇到写测试用例的时候无从下手&#xff0c;我就想和大家简单的聊聊&#xff0c;这篇文章主要是针对功能测试的哟。 一、什么是测试用例&#…

如何将服务器数据迁移到另一台服务器?

将服务器数据迁移到另一台服务器通常涉及以下几个步骤&#xff1a; 1.备份数据&#xff1a; 在进行数据迁移之前&#xff0c;首先需要备份服务器上的数据。这包括网站文件、数据库、配置文件等。可以使用各种备份工具和方法&#xff0c;如rsync、scp、FTP、数据库备份工具等。 …

Azure Databricks 集群合并小文件与删除过多的历史版本

原因是&#xff1a;databricks 集群的数据底层是HDFS虽然是spark做为引擎读写如果没有及时合并也一样会因为小文件问题造成大量的资源消耗&#xff0c;也就会越来越慢。目前采用的主要方式&#xff0c;定时合并&#xff0c;与版本删除 1、python 脚本如下有用到的同学可以参考下…

Flask开发类似jenkins构建自动化测试任务工具

1、自动化 某一天你入职了一家高大上的科技公司&#xff0c;开心的做着软件测试的工作&#xff0c;每天点点点&#xff0c;下班就走&#xff0c;晚上陪女朋友玩王者&#xff0c;生活很惬意。 但是美好时光一般不长&#xff0c;这种生活很快被女主管打破。为了提升公司测试效率…

有了HTTP协议,为什么还要有WebSocket

HTTP的缺陷 现在的应用场景可能更多的是&#xff0c;前端发起一次HTTP请求&#xff0c;服务器后端返回一次HTTP响应。但是有这样的场景&#xff0c;是需要服务器主动给前端发送请求的。 最常见的场景是扫码登陆。 这里有两种解决方案&#xff0c;一种是微信的解决方案&#xf…

Could not find artifact com.gexin.platform:gexin-rp-sdk-http:pom:4.1.0.1

Could not find artifact com.gexin.platform:gexin-rp-sdk-http:pom:4.1.0.1 新接手了一个项目&#xff0c;导入到idea后&#xff0c;maven标签中页点击Reload All Maven Projects&#xff0c;报Could not find artifact com.gexin.platform:gexin-rp-sdk-http:pom:4.1.0.1错…

YOLOv5算法进阶改进(19)— 在主干网络中引入SAConv | 轻量化的可切换空洞卷积

前言:Hello大家好,我是小哥谈。Switchable Atrous Convolution(SAC)是一种用于图像处理和计算机视觉任务的卷积神经网络(CNN)操作。它是在传统的空洞卷积的基础上进行改进的。传统的空洞卷积是一种通过在卷积核中引入空洞(或称为膨胀率)来扩大感受野的技术。然而,传统…

网络学习:Vlan基础知识、划分思路及其优越性

目录 一、VLAN基础知识 二、VLAN的划分方法 1. 基于端口划分的VLAN 2. 基于MAC地址划分VLAN 3. 基于网络层协议划分VLAN 4. 根据IP组播划分VLAN 5. 按策略划分VLAN 6. 按用户定义、非用户授权划分VLAN 三、VLAN的优越性 1. 增加了网络连接的灵活性 2. 控制网络上的广…

GStreamer管道播放建立

1 mediainfo工具获取媒体的基本信息 1.1 封装形式(别被文件后缀迷惑,有些mp4封装,可能是ts等等) TS封装:/home/firefly# mediainfo /home/firefly/LG_Colors-of-Journey-HDR.mp4 General ID : 1 (0x1) Complete name …

企业信息化转型之企业统一门户搭建

一、当前企业门户实施的背景和痛点 企业随着公司业务的发展&#xff0c;公司运作的复杂度在不断加大&#xff0c;各部门的业务量和业务的复杂度都在不断增加&#xff0c;已经建设了ERP、HR、OA、考勤、合同、BPM、PLM等有效地支撑了过去和现有业务的发展。 企业在信息化办公是…

Github上哪些好用的工具

专注于web漏洞挖掘、内网渗透、免杀和代码审计&#xff0c;感谢各位师傅的关注&#xff01;网安之路漫长&#xff0c;与君共勉&#xff01; Qexo-爱写博客的师傅强烈推荐 漂亮的 Hexo 静态博客编辑器。该项目是基于 Django 的 Hexo 静态博客管理后台&#xff0c;支持文章管理、…

暖通空调HVAC软件行业调研报告

本文调研和分析全球暖通空调HVAC软件发展现状及未来趋势&#xff0c;核心内容如下&#xff1a; &#xff08;1&#xff09;全球市场暖通空调HVAC软件总体规模&#xff0c;按收入进行了统计分析&#xff0c;历史数据2019-2023年&#xff0c;预测数据2024至2030年。 &#xff08;…

Nginx和Ribbon实现负载均衡的区别

Nginx和Ribbon的区别 1. Nginx服务器端负载均衡&#xff1a; 1、Nginx是客户端所有请求统一交给nginx&#xff0c;由nginx进行实现负载均衡请求转发&#xff0c;属于服务器端负载均衡。即请求有nginx服务器端进行转发。 3、Nginx是服务端的负载均衡&#xff0c;Ribbon是客户端…