前端拖拽后端數(shù)據(jù)處理

問題來源

前端開發(fā)做表格展現(xiàn)的時(shí)候，遇到需要拖拽變更數(shù)據(jù)順序的問題，前端使用拖拽功能或者其他框架可以實(shí)現(xiàn)，但同時(shí)需要把該拖拽結(jié)果持久到數(shù)據(jù)庫，保證后續(xù)的展現(xiàn)依舊是拖拽后的正常排序。

實(shí)現(xiàn)前端拖拽排序后臺(tái)處理排序

每次變動(dòng)都得要更新到后臺(tái)數(shù)據(jù)庫，比較頻繁，如果量比較大，可以修改為點(diǎn)擊按鈕進(jìn)行觸發(fā)；量比較小，也就是修改順序的情況比較小的話，可以直接AJAX處理。

處理

加入后臺(tái)的數(shù)據(jù)表結(jié)構(gòu)如下

image-20191014103642399

id：主鍵

st：排序值

name：名稱等其他屬性

前端傳遞到后臺(tái)的情況：

首先，前端的默認(rèn)排序是：1，2，3，4，其id也是1，2，3，4

image-20191014103816418

假如拖動(dòng)了1和2，那么前端的id順序變?yōu)椋?，1，3，4，我們需要把id按照這個(gè)順序送到后臺(tái)，后臺(tái)根據(jù)該id集合的順序修改對(duì)應(yīng)的st值。

在mysql數(shù)據(jù)庫的情況下，使用

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，數(shù)組
  },
});

我們在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>