前端表单上下移动接口实现

r囧r小猫 2022-06-01 08:24 239阅读 0赞

要求：项目中遇到前端页面读取完数据后，需要对排序进行上下移动

思路：让前端传入两个参数，一个是状态，0前进，1后退，再把当前的sort值发送到后台，后台根据当前的状态值，判断前进还是后退；根据传入的sort去查找当前这条记录，对sort进行+1或者-1的更新操作，再把数据通过 ORDER BY 函数进行排序发送给前端页面

实现：

据传入的sort去查找当前这条记录，对sort进行+1或者-1操作的Mybatis XML写法

这是上移更新操作：通过子查询的方法，通过sort\_order字段找到当前数据，对数据的sort\_order进行-1操作

<update id="sortUp" parameterType="java.util.HashMap">

UPDATE md\_drainage\_basin

SET sort\_order = CASE sort\_order

WHEN \#\{sortOrder\} THEN

sort\_order - 1

ELSE

sort\_order + 1

END

WHERE

sort\_order IN (

SELECT \* FROM (

SELECT sort\_order FROM md\_drainage\_basin t1 WHERE t1.sort\_order = (

SELECT sort\_order FROM md\_drainage\_basin

WHERE sort\_order = \#\{sortOrder\}

) - 1 OR t1.sort\_order = \#\{sortOrder\}

) ids

)

</update>

这是下移操作： 通过子查询的方法，通过sort\_order字段找到当前数据，对数据的sort\_order进行+1操作

<update id="sortDown" parameterType="java.util.HashMap">

UPDATE md\_drainage\_basin

SET sort\_order = CASE sort\_order

WHEN \#\{sortOrder\} THEN

sort\_order + 1

ELSE

sort\_order - 1

END

WHERE sort\_order IN (

SELECT \* FROM (

SELECT sort\_order FROM md\_drainage\_basin t1

WHERE t1.sort\_order = (

SELECT sort\_order FROM md\_drainage\_basin

WHERE sort\_order = \#\{sortOrder\} ) + 1

OR t1.sort\_order = \#\{sortOrder\}

) ids

)

</update>

而后将两个方法写入对应的Mapper接口中，再业务逻辑处理层进行操作，判断前端传入的状态码

public Result sortOrder(Integer page, Integer size, @RequestParam Integer sortOrder,@RequestParam Integer status) \{

HashMap<String,Object> map = new HashMap<>();

map.put("sortOrder",sortOrder);

switch (status)\{

case 0:

if (sortOrder != 1)\{

mdWaterSystemMapper.sortUp(map);

\}

break;

case 1:

List<MdWaterSystem> listSize = mdWaterSystemMapper.findBy();

if (sortOrder <= listSize.size())\{

mdWaterSystemMapper.sortDown(map);

\}

break;

\}

PageHelper.startPage(page, size);

List<MdWaterSystem> list = mdWaterSystemMapper.findBy();

PageInfo pageInfo = new PageInfo(list);

return ResponseMsgUtil.success(pageInfo);

\}

两个 case中都加了if判断，用意是：上移时，若序号等于1，是头一位了就不进行上移操作；下移时，查询出所有的条目数字，若到达最大值最后一个了，到底了就不进行下移操作，做完判断后，将进行排序过的ORDER BY查询所有的进行返回给前端

这里有一点要注意：看需求返回，若需要移动完直接返回所有的话，用以上这种方法

List<MdWaterSystem> list = mdWaterSystemMapper.findBy();

若条件查询后展示数据还是条件查询后的语句，则需要换一种思路： 分出两种查询结果，一种是返回所有，一种是返回条件查询结果，根据判断是否被查询过而来选择哪一种结果返回

![SouthEast][]

同样的方法，不同的返回结果，所以要再设定一个接口方法，把sortOrder方法放进去，返回两种结果

[SouthEast]: /images/20220601/3c76f48a17f2419c9f0076505f861d6d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关接口测试-接口定义功能-前端-实现动态增删表单

![在这里插入图片描述][5fb87c883155482198a70b4dca710d26.gif_pic_center] 基于 springboot+vue 的测试平台开

爱被打了一巴掌/ 2023年10月08日 14:21/ 0 赞/ 9 阅读

相关前端HTML表单

表单简介：标签名：form 用于将数据发送到服务器 <form action="服务器地址"></form> 表单项： > 文本框： >

比眉伴天荒/ 2022年09月03日 14:25/ 0 赞/ 150 阅读

相关 php 表单提交表单前端验证

//HTML 代码 <form id="form"> <input type="hidden" name="status" v

た入场券/ 2022年06月09日 09:21/ 0 赞/ 305 阅读

相关前端表单上下移动接口实现

要求：项目中遇到前端页面读取完数据后，需要对排序进行上下移动思路：让前端传入两个参数，一个是状态，0前进，1后退，再把当前的sort值发送到后台，后台根据当前的状

r囧r小猫/ 2022年06月01日 08:24/ 0 赞/ 240 阅读

相关前端表单验证

1.输入框只能输入数字： input type="text" onkeyup="value=value.replace(/[^\d]/g,'')"> 2.JavaS

妖狐艹你老母/ 2022年05月13日 07:58/ 0 赞/ 235 阅读

相关两个select左右移动、上下移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

ゞ浴缸里的玫瑰/ 2022年04月14日 05:47/ 0 赞/ 217 阅读

相关原生js实现表单前端校验

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页

忘是亡心i/ 2022年04月06日 07:56/ 0 赞/ 215 阅读

相关用jQuery实现div的上下左右移动

html代码 <input type="button" value="向左" id="left"> <input type="button" value

雨点打透心脏的1/2处/ 2022年03月10日 03:38/ 0 赞/ 550 阅读

相关 JavaScript - 实现数组元素上下移动

前言通过js中数组的`splice()`函数实现 splice() 方法 JavaScript splice() 方法注释

客官°小女子只卖身不卖艺/ 2021年09月30日 11:48/ 0 赞/ 380 阅读

相关章节表单前端实现

一章节表单组件 1 组件模板 <template>  <el-dialog :visible=

偏执的太偏执、/ 2021年07月24日 19:49/ 0 赞/ 416 阅读