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

news2024/11/17 17:39:35

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;

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

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

相关文章

【深度学习实践】HaGRID,YOLOv5,手势识别项目,目标检测实践项目

文章目录 数据集介绍下载数据集将数据集转换为yolo绘制几张图片看看数据样子思考类别是否转换下载yolov5修改数据集样式以符合yolov5创建 dataset.yaml训练参数开始训练训练分析推理模型转换onnx重训一个yolov5s后记 数据集介绍 https://github.com/hukenovs/hagrid HaGRID&a…

ElementUI Message 消息提示,多个显示被覆盖的问题

现象截图&#xff1a; 代码&#xff1a;主要是在this.$message 方法外层加上 setTimeout 方法 <script> export default {name: "HelloWorld",props: {msg: String,},methods: {showMessage() {for (let i 0; i < 10; i) {setTimeout(() > {this.$mess…

windows ffmpeg 编译环境搭建

编译ffmpeg https://www.msys2.org/ https://www.ffmpeg.org/platform.html#Microsoft-Visual-C_002b_002b-or-Intel-C_002b_002b-Compiler-for-Windows 1.安装msys2 2.安装yasm或者nasm 打开VC 本地环境命令行 唤醒msys2界面 配置编译环境变量参数 export PATH"/d/vs…

Net Core 使用Mongodb操作文件(上传,下载)

Net Core 使用Mongodb操作文件&#xff08;上传&#xff0c;下载&#xff09; 1.Mongodb GridFS 文件操作帮助类。 GridFS 介绍 https://baike.baidu.com/item/GridFS/6342715?fraladdin DLL源码&#xff1a;https://gitee.com/chenjianhua1985/mongodb-client-encapsulati…

Vue3基础速成

Vue常用语法 {{ }} 变量、表达式渲染 {{ }} 用于输出对象属性和函数返回值 <div id"hello-vue" class"demo">{{ message }} </div><script>const HelloVueApp {data() {return {message: Hello Vue!!}}}Vue.createApp(HelloVueApp).…

码头船只出行和货柜管理系统的设计与实现

针对于码头船只货柜信息管理方面的不规范&#xff0c;容错率低&#xff0c;管理人员处理数据费工费时&#xff0c;采用新开发的码头船只货柜管理系统可以从根源上规范整个数据处理流程。 码头船只货柜管理系统能够实现货柜管理&#xff0c;路线管理&#xff0c;新闻管理&#…

使用Julia及R语言生成正态分布的随机数字并写入CSV文件

在操作之前需要先下载Julia的Distributions包&#xff0c;这个包用于进行相关概率分布的函数调用。 在输入 ] 进入Julia包管理模式后输入&#xff1a; add Distributions 这里我使用我们自己实验室的实测数据 &#xff0c;平均值0.67&#xff0c;方差0.11&#xff0c;数据分…

Devin,第一位AI软件工程师

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

LeetCode.2864. 最大二进制奇数

题目 2864. 最大二进制奇数 分析 这道题目其实我们只需要保证最后一位是1&#xff0c;其余的1都放在最前面&#xff0c;这样得到的就是最大二进制奇数。 所以&#xff0c;我们先统计给定的字符串有多少个 1&#xff0c;多少个 0&#xff0c;把其中一个 1 放在最后一位&…

【C#】【SAP2000】读取SAP2000中所有Frame对象的应力比到Grasshopper中

if (build true) {// 连接到正在运行的 SAP2000// 使用 System.Runtime.InteropServices.Marshal.GetActiveObject 方法获取正在运行的 SAP2000 实例cOAPI mySapObject (cOAPI)System.Runtime.InteropServices.Marshal.GetActiveObject("CSI.SAP2000.API.SapObject"…

趣学前端 | 平平无奇的JavaScript函数

背景 最近睡前习惯翻会书&#xff0c;重温了《JavaScript权威指南》。这本书&#xff0c;文字小&#xff0c;内容多。两年了&#xff0c;我才翻到第十章。因为书太厚&#xff0c;平时都充当电脑支架。 JavaScript函数 读这章之前&#xff0c;我感觉我三十年开发功力&#xf…

构建社区服务平台的智慧架构

社区服务平台作为连接社区居民与各类服务资源的桥梁&#xff0c;承载着提升居民生活品质、促进社区发展的重要使命。本文将深入探讨社区服务平台的架构设计理念、核心功能和发展前景&#xff0c;助力读者了解如何构建智慧化、便捷化的社区服务平台&#xff0c;为社区居民提供更…

SpringBoot+Vue项目报错(问题已解决)

1、错误日志 2、分析原因&#xff1a; JWT strings must contain exactly 2 period characters. Found: 0 JWT字符串必须包含2个句号字符。发现:0 分析&#xff1a;可以判断出大概可能是token格式出现了问题 3、参考 http://t.csdnimg.cn/hfEiY 4、检查后端代码是否出现问…

VR数字展厅在企业中应用的优势有哪些?

随着VR全景技术的成熟&#xff0c;VR数字展厅逐渐成为了企业展示形象和产品的重要手段之一。VR企业数字展厅是一种通过VR技术、3D建模技术展示企业形象和产品的创新方式&#xff0c;将企业线下的展厅搬到线上&#xff0c;为企业品牌形象带来了很多优势。 VR数字展厅在企业中应用…

数学实验_Matlab使用2_简单绘图

简单使用 x -pi * 2 : .1 : pi*2;y sin(x);plot(x, y); % 绘制普通图像plot(x, y, k-.*); % 绘制2维图像&#xff0c;线为实线&#xff0c;*为每个点&#xff08;Matlab的画图比较原始&#xff0c;就是简单的秒点画图&#xff09;grid on; % 打开网状格式% grid off; % 关闭…

php中 0 == ‘’(0等于任意字符串) 判断是否成立 返回true

php中不同类型变量之间比较大小 一、背景二、探究0是为什么&#xff1f;三、探究 0all是为什么&#xff1f;四、程序中如何判断0是否等于指定字符串 一、背景 最近在项目实际开发中&#xff0c;我需要判断前端传来的参数值是否等于一个字符串&#xff1b;然后发现当参数值是0时…

每天五分钟计算机视觉:如何构造分类定位任务的算法模型?

本文重点 本节课程我们将学习分类定位的问题,也就是说不仅要完成图片分类任务,然后还要完成定位任务。如下所示,我们不仅要用算法判断图片中是不是一辆车,还要在图片中标记出它的位置,用边框对象圈起来,这就是分类定位问题。 一般可能会有一张图片对应多个对象,本节课我…

你《时间贫困》么?

今天我要为大家分享的书叫《时间贫困》 这本书出版于2023年12月 “时间贫困”这个名字是什么意思呢&#xff1f; 它指的是一种没有自己的时间的感受 这种感受我相信大家都不陌生 现代人早晨被闹钟叫醒后就忙着洗漱、吃早饭、上班 下班后经过漫长的通勤回到家 可能还要处理各种琐…

Mysql 死锁案例4-delete 相邻记录导致死锁

死锁复现 CREATE TABLE t (id int(11) NOT NULL,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),KEY c (c) ) ENGINEInnoDB DEFAULT CHARSETutf8;/*Data for the table t */insert into t(id,c,d) values (0,0,0),(5,5,5),(10,10,10),(15,15,15) 事务1事…

数据结构入门篇 之 【双链表】的实现讲解(附完整实现代码及顺序表与线性表的优缺点对比)

一日读书一日功&#xff0c;一日不读十日空 书中自有颜如玉&#xff0c;书中自有黄金屋 一、双链表 1、双链表的结构 2、双链表的实现 1&#xff09;、双向链表中节点的结构定义 2&#xff09;、初始化函数 LTInit 3&#xff09;、尾插函数 LTPushBack 4&#xff09;、头…