前端拖拽后端数据处理

前端拖拽后端数据处理

问题来源

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

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

每次变动都得要更新到后台数据库，比较频繁，如果量比较大，可以修改为点击按钮进行触发；量比较小，也就是修改顺序的情况比较小的话，可以直接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 demo set st = (
        CASE id
        
            when #{item} then #{index}
        
        END
        )
        WHERE id IN
        
            #{item}