拖拽排序 + 置顶和置底逻辑的实现

最近在实现拖拽排序、置顶和置底逻辑时遇到了比较恶心的问题。以下为记录

背景

我们系统的排序是基于数据库中的 sort_num 字段进行的,sort_num 值越大,数据排位越靠前。新增数据时,其 sort_num 默认为其 id 值。假设当前有 10 条数据,最大 id 为 10,新增数据 id=11,sort_num 也为 11,因此新增的数据会排在最前面。

拖拽排序

最简单的拖拽排序方法是对当前页面的数据重新排序。假设当前页面有 5 条数据,排序顺序为:

1
2
3
4
5

当用户将 id=3 的数据拖动到第一位时,前端会传递新的排序顺序:

3
1
2
4
5

服务端会获取当前页面的最大 id 值(5),并减去排序项数量减 1(5-4=1),得到最小排序值(1),并重新分配排序号:

ID  排序号
3   5
1   4
2   3
4   2
5   1

这种方式可以实现拖拽排序。

置顶和置底逻辑

加入置顶和置底逻辑后,问题变得复杂。例如,假设 id=4 置顶,此时我们获取当前 id 最大的记录(假设 id=100, sort_num=100),并将 id=4 的 sort_num 更新为 100。但此时查询结果可能会有两个记录都显示在顶端:id=4 和 id=100。

为解决此问题,我们引入了多字段排序。即在 sort_num 相同的情况下,使用 update_time 作为第二排序字段。每次更新数据时,update_time 会更新为当前时间,因此可以通过 ORDER BY sort_num DESC, update_time DESC 实现正确排序。

置底逻辑

置底逻辑与置顶类似,不同之处在于我们会找到当前最小的排序值,并将其减 1 作为新的排序值。然而,由于 sort_num 字段是无符号类型,当最小排序值为 0 时,再减 1 仍然是 0。例如:

【id=4,sort_num=0,update_time=2024-07-09 17:00:00】
【id=5,sort_num=0,update_time=2024-07-09 17:01:00】
此时 id=4 在最底部,id=5 倒数第二,显然不符合预期。

解决方案

将 sort_num 字段改为有符号类型,使其支持负数。这样在置底逻辑中,当最小排序值为 0 时,我们可以继续向负数方向延伸,避免排序冲突。

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

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

相关文章

Linux实战记录

踩坑实录: day2: 最坑:安装UB居然不知道创建文件夹。 1.虚拟机上不了网:多重置几次 网卡 2.Winscp链接主机: 用户名 就是 linux terminal中的 第一个用户名!

mybatis-plus参数绑定异常

前言 最近要搞个发票保存的需求,当发票数据有id时说明是发票已经保存只需更新发票数据即可,没有id时说明没有发票数据需要新增发票;于是将原有的发票提交接口改造了下,将调用mybatis-plus的save方法改为saveOrUpdate方法&#xff…

架构设计(2)云原生架构与实例部署

云原生架构 云原生架构是一种面向云环境设计和构建应用程序的方法论,旨在充分利用云计算的优势,如弹性、自动化和可扩展性,以实现更高效、可靠和灵活的应用部署和管理。以下是云原生架构的核心理念和关键特点: 核心理念&#xf…

opencv读取视频文件夹内视频的名字_时长_帧率_分辨率写入excel-cnblog

看视频的时候有的视频文件名贼长。想要翻看,在文件夹里根本显示不出来,缩短又会丢失一些信息,所以我写了一份Python代码,直接获取视频的名字,时长,帧率,还有分辨率写到excel里。 实际效果如下图…

打造个性化科学工具箱:使用conda-build自定义软件包

打造个性化科学工具箱:使用conda-build自定义软件包 引言 Conda是一个强大的包管理系统,广泛用于Python社区,尤其在数据科学和机器学习领域。除了安装现成的包,Conda还允许用户通过conda-build工具构建和分享自己的软件包。本文…

imx6ull/linux应用编程学习(15) 移植MQTT客户端库

1. 准备开发环境 确保你的Ubuntu系统已经安装了必要的工具和依赖项。打开终端并运行以下命令: sudo apt update sudo apt install build-essential cmake git2. 获取MQTT库 git clone https://github.com/eclipse/paho.mqtt.c.git cd paho.mqtt.c3. 编译MQTT库 mk…

NI SCXI-1001 模块处理器控制器

NI SCXI-1001 一款小巧紧凑的传感器,可提供准确可靠的测量。它具有四个通道,允许同时进行多个测量。该传感器设计用于各种传感器,包括热电偶,rtd和应变片。 NI SCXI-1001 特征: 高密度设计:实现大量开关…

教程系列1 | 趋动云『社区项目』极速部署 SD WebUI

在上周,趋动云新推出的『社区项目』功能,以“一键克隆”的极致便捷与“省时省力”的高效体验,赢得了广大用户的关注。 随后,启动趋动云『社区项目』教程系列,旨在从零开始,全方位、手把手地引领您深入探索…

Pandas在生物信息学中的应用详解

Pandas在生物信息学中的应用详解 引言 生物信息学作为一门将计算机科学和生物学相结合的跨学科领域,正随着高通量实验技术的飞速发展而日益重要。Pandas,作为Python中一个强大的数据处理库,为生物信息学研究提供了便捷高效的数据处理和分析…

实现双向循环链表的 创建、判空、尾插、遍历、尾删、销毁

#include "link.h"//create DoubleLink head node DoubleLink_p DoubleLink_create() {DoubleLink_p H (DoubleLink_p)malloc(sizeof(DoubleLink));if(NULL H){printf("失败");return NULL;}H -> len 0;H -> next H;H -> prior H;printf(&qu…

044基于SSM+Jsp的个性化影片推荐系统

开发语言:Java框架:ssm技术:JSPJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包…

安装nodejs | npm报错

nodejs安装步骤: 官网:https://nodejs.org/en/ 在官网下载nodejs: 双击下载下来的msi安装包,一直点next,我选的安装目录是默认的: 测试是否安装成功: 输入cmd打开命令提示符,输入node -v可以看到版本,说…

vue项目中使用svg图标/插件svg-sprite-loader

项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图,但是svg不能直接像image标签一样直接使用,这就需要前端的同学自己处理了。 svg有以下优点: svg放大不失真,png,jpg会出现失真现象 svg的体积非常小,对…

JVM原理(二四):JVM虚拟机锁优化

高效并发是从JDK 5升级到JDK 6后一项重要的改进项,HotSpot虛 拟机开发团队在这个版本上花费了大量的资源去实现各种锁优化技术,如适应性自旋( Adaptive Spinning)、锁消除( Lock Elimination)、锁膨胀(Lock Coarsening)、轻量级锁(Lightweight Locking)、…

代码随想录打卡第十八天

代码随想录–二叉树部分 day 17 休息日 day 18 二叉树第五天 文章目录 代码随想录--二叉树部分一、力扣654--最大二叉树二、力扣617--合并二叉树三、力扣700--二乘树中的搜素四、力扣98--验证二叉搜索树 一、力扣654–最大二叉树 代码随想录题目链接:代码随想录 给…

初识CPlusPlus

前言 也是好久没写博客了,那些天也没闲着,去练题去了。实际上练题也可以写练题的博客,但是觉得太简单了些,于是就没有继续写下去。如今又回来写博客,是因为有整理了新的知识C。内容不算多,大多数都是书本上…

【C++ 】中类的成员函数和析构函数的作用

在C中,类的成员函数和析构函数各自扮演着不同的角色,它们对于类的对象的生命周期管理和行为实现至关重要。 成员函数 成员函数是类的一部分,它们允许你定义类的行为,包括但不限于: 操作数据成员:成员函数…

Spring-事务(三)

作者:月下山川 公众号:月下山川 1、什么是事务 数据库事务( transaction)是访问并可能操作各种数据项的一个数据库操作序列,这些操作要么全部执行,要么全部不执行,是一个不可分割的工作单位。事务由事务开始与事务结束之间执行的…

证件照片换背景底色 免费 证件照片制作软件免费下载 证件照换衣服软件免费有哪些好用

证件照是我们身份认证的重要凭证,其质量和专业性都很重要。然而,很多时候,由于各种原因,我们可能无法在拍摄证件照时穿上合适的服装,这就给证件照的质量和形象带来了一定的影响。幸运的是,现在市面上出现了…

【保姆级介绍下C语言中的运算符的优先级】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 🧇C语言中的运算符的优先级 🧇C语言中的运算符的优先级决定了表达…