前端拖拽后端数据处理
问题来源
前端开发做表格展现的时候，遇到需要拖拽变更数据顺序的问题，前端使用拖拽功能或者其他框架可以实现，但同时需要把该拖拽结果持久到数据库，保证后续的展现依旧是拖拽后的正常排序。
实现前端拖拽排序后台处理排序
每次变动都得要更新到后台数据库，比较频繁，如果量比较大，可以修改为点击按钮进行触发；量比较小，也就是修改顺序的情况比较小的话，可以直接AJAX处理。
处理
加入后台的数据表结构如下
image-20191014103642399
id：主键
st：排序值
name：名称等其他属性
前端传递到后台的情况：
首先，前端的默认排序是：1，2，3，4，其id也是1，2，3，4
image-20191014103816418
假如拖动了1和2，那么前端的id顺序变为：2，1，3，4，我们需要把id按照这个顺序送到后台，后台根据该id集合的顺序修改对应的st值。
在mysql数据库的情况下，使用
UPDATE demo
SET st = CASE id
WHEN 1 THEN 2
WHEN 2 THEN 1
WHEN 3 THEN 3
WHEN 4 THEN 4
END
WHERE id IN (1,2,3,4)
前端通过AJAX
$.ajax({
url: "updateSortsController",
type: 'POST',
dataType: 'json'
data : {
ids: sortedIds() //排序后的id，数组
},
});
我们在MyBatis里面可以这样
int updateSort(@Param("ids")String[] ids);
<update id="updateSort">
update demo set st = (
CASE id
<foreach collection="ids" index="index" item="item">
when #{item} then #{index}
</foreach>
END
)
WHERE id IN
<foreach item="item" index="index" collection="ids" open="(" separator="," close=")">
#{item}
</foreach>
</update>
