前端拖拽后端数据处理

前端拖拽后端数据处理

问题来源

前端开发做表格展现的时候,遇到需要拖拽变更数据顺序的问题,前端使用拖拽功能或者其他框架可以实现,但同时需要把该拖拽结果持久到数据库,保证后续的展现依旧是拖拽后的正常排序。

实现前端拖拽排序后台处理排序

每次变动都得要更新到后台数据库,比较频繁,如果量比较大,可以修改为点击按钮进行触发;量比较小,也就是修改顺序的情况比较小的话,可以直接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>

推荐阅读更多精彩内容