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

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还包含了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;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

strcat函数

函数理解记忆&#xff1a;str表示是<string.g>中的函数&#xff0c;cat表示附加。意思是将一个字符串的内容附加到另一个字符串的末尾。 注意要点&#xff1a;既然要附加&#xff0c;附加的字符串和被附加的字符串都要有\0。否则不知道附加多少&#xff0c;不知附加在哪…

【Linux进程的知识点】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档文章目录 前言 操作系统的知识补充 我们来理解一个用户操作接口&#xff1a; 进程的理解 进程的基本概念 描述进程-PCB task_struct-PCB的一种 task_ struct内容分类 …

算法刷题Day8 | 344.反转字符串、541. 反转字符串II、卡码网:54.替换数字、151.翻转字符串里的单词、卡码网:55.右旋转字符串

目录 0 引言1 反转字符串1.1 我的解题1.2 2 反转字符串II2.1 解题 3 替换数字3.1 双指针法 4 翻转字符串里的单词4.1 我的解题思路4.2 另一种思路 5 右旋转字符串5.15.2 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题…

什么是序列化?为什么需要序列化?

1、典型回答 序列化(Serialization)序列化是将对象转换为可存储或传输的形式的过程(例如: 将对象转换为字节流) 反序列化(Deserialization) 是将序列化后的数据(例如: 二进制文件)转换回原始对象的过程。通过反序列化&#xff0c;可以从存储介质 (如磁盘、数据库) 或通过网络…

程序员们的“薪饭碗”鸿蒙迎来“薪”的就业岗位

随着科技行业的不断创新和发展&#xff0c;程序员们所面对的技术挑战和机遇也在不断增加。近年来&#xff0c;鸿蒙操作系统的崛起为程序员们提供了新的就业机会和发展前景。 鸿蒙系统作为一种全新的操作系统&#xff0c;在市场上占据一席之地。在当前就业市场中&#xff0c;鸿…

网络套接字-UDP服务器

一 预备知识 1 端口号和进程id 主机间的数据传输本质是两个进程在通信&#xff0c;就像是我们打开抖音刷视频&#xff0c;视频不是都保存在手机上的&#xff0c;而是服务器发送给你的&#xff0c;这里就是用到了网络。 那如何保证把数据给指定进程呢? 就是用端口号去标识主机中…

[实战]API防护破解之签名验签

前言&#xff1a; 传统的接口在传输的过程中&#xff0c;是非常容易被抓包进行篡改&#xff0c;从而进行中间人攻击。这时候我们可以通过对参数进行签名验证&#xff0c;如果参数与签名值不匹配&#xff0c;则请求不通过&#xff0c;直接返回错误信息&#xff0c;从而防止黑客…

Java错误:微服务报错Cannot execute request on any known serve

&#x1f414;问题内容 报Cannot execute request on any known server 这个错&#xff1a;连接Eureka服务端地址不对。 &#x1f414;解决方式 检查.yml文件或者.properties文件配置 下划线下划线后面的小写字母等同于去掉下划线大写下划线后面的字母&#xff08;驼峰原则&am…

网络安全从业人员何去何从

从2024年1月1日开始到今天&#xff0c;基本没有真正放下自己休息过一天。可能很多人会说是卷&#xff0c;其实真正的原因是压力。不仅仅是生活压力还有行业压力。 今年这个行业让很多人开始感到了迷茫&#xff0c;不仅是股市的低迷&#xff0c;更多的来自于各大公司不断的因为…

Linux学习:基础开发工具的使用(1)

目录 1. Linux软件包管理器&#xff1a;yum工具1.1 yum是什么&#xff08;软件商城&#xff09;1.2 yum的使用1.3 yum的背景生态 2. 项目开发与集成开发环境3. vim编辑器3.1 vim编辑器的常见模式与模式切换3.3 vim编辑器的使用3.3.1 命令模式下的常见命令&#xff1a;3.3.2 vim…

【安装mysql】centos7 安装mysql

文章目录 1.卸载不用的环境2.获取mysql官方yum源3.开始安装4.常规登录4.1方法一&#xff1a;【博主可以】4.2方法二&#xff1a;直接用client登录4.3方法三&#xff1a;修改配置文件 5.设置配置文件5.1配置my .cnf5.2开机自启动 1.卸载不用的环境 查看有无mysql/mariadb ps ax…

优雅的记录日志,拒绝打印模糊信息导致bug定位难

想必大家都有过这样的经历&#xff1a;在项目中遇到报错需要紧急修复时&#xff0c;却因为日志信息模糊不清&#xff0c;无法迅速准确地定位到错误源头&#xff0c;这确实让人感到十分苦恼和无奈。 在新入职一家公司并着手修改遗留bug时&#xff0c;经常发现之前的开发者并未记…

Java Day9 Stream流

Stream流 1、认识2、Stream流使用步骤3、如何获取Stream流4.Stream流的中间方法5、 Stream流终结方法 1、认识 2、Stream流使用步骤 3、如何获取Stream流 //list获取stream流List<String> listnew ArrayList<>();Collections.addAll(list,"崔十一","…

NUMA简介

NUMA 1 什么是NUMA 早期的计算机&#xff0c;内存控制器还没有整合进 CPU&#xff0c;所有的内存访问都需要经过北桥芯片来完成。如下图所示&#xff0c;CPU 通过前端总线&#xff08;FSB&#xff0c;Front Side Bus&#xff09;连接到北桥芯片&#xff0c;然后北桥芯片连接到…

小型校园网配置笔记

1&#xff0c;搭建网络拓扑图 LSW1:三层交换机命令&#xff1a; <Huawei>sys [Huawei]undo info-center enable Info: Information center is disabled. [Huawei]vlan batch 10 20 30 40 100 101 [Huawei]int vlan 10 [Huawei-Vlanif10]ip add 192.168.10.254 24 …

vivado FIFO IP核的使用

FIFO是先进先出的数据缓存器。起到跨时钟域的数据缓冲作用&#xff0c;一般在实际应用过程当中采用异步读写的方式&#xff0c; 选择的配置如下 封装IP核 module clk_wiz(input resetn ,input clk_in1 ,output clk_out1 ,output clk_out2 …

VScode Error Lens插件

安装完成之后&#xff0c;当我们输入一些错误的语法格式的时候&#xff0c;它都会有一些提示&#xff01; 一开始是英文提示 修改为中文提示 设置搜索 typescript.local

力扣串题:字符串中的第二大数字

此题的精妙之处在于char类型到int类型的转化&#xff0c;需要运算来解决 int secondHighest(char * s) {int max1-1;int max2-1;int szstrlen(s);int i 0 ;for(i0;i<sz;i){if(s[i]>0&&s[i]<9){if((s[i]-0)>max1){max2max1;max1s[i]-0;}else if((s[i]-0)&l…

VUE/HTML网页在线编辑AutoCAD DWG文档

猿大师办公助手作为一款专业的网页在线编辑Office插件&#xff0c;不仅支持微软Office、金山WPS及永中Office完整嵌入到最新版Chrome、Ddge、Firefox等浏览器中使用&#xff0c;猿大师还可以把Autodesk的AutoCAD、DWG TrueView、Design Review等软件嵌入到浏览器网页中&#xf…

写给新手的单元测试框架unittest运行的简单问题

当使用unittest框架编写和运行单元测试时&#xff0c;需要遵循以下步骤&#xff1a; 1、导入unittest模块&#xff1a;在代码中首先导入unittest模块。 import unittest 2、创建测试类&#xff1a;创建一个继承自unittest.TestCase的测试类。该类将包含一系列测试方法。 clas…