来源:http://news.mkq.online/ 作者:牛站新闻
列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题
如何实现才能达到效率最高呢?
先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~
先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里。
接口设计:
view source
print
?
01
//
i
d
s
这
十
条
数
据
的
i
d
集
合
,
逗
号
隔
开
的
字
符
串
02
/
/
ids 这十条数据的id集合,逗号隔开的字符串 02 //
ids这十条数据的id集合,逗号隔开的字符串02//oldIndex 原始位置,从0开始算
03
//
n
e
w
I
n
d
e
x
要
拖
动
的
位
置
04
f
u
n
c
t
i
o
n
d
r
a
g
S
o
r
t
(
newIndex 要拖动的位置 04 function dragSort(
newIndex要拖动的位置04functiondragSort(ids,
o
l
d
I
n
d
e
x
,
oldIndex,
oldIndex,newIndex)
05
{
06
//保证查找出来的数据跟前台提交的顺序一致,这里要order by field
07
//id 主键 sort 排序值
08
s
q
l
=
"
s
e
l
e
c
t
i
d
,
s
o
r
t
f
r
o
m
表
名
字
w
h
e
r
e
i
d
i
n
(
sql = "select id,sort from 表名字 where id in (
sql="selectid,sortfrom表名字whereidin(ids) order by field(id, " . $ids . ") ";
09
$list = “这里省略,就是去数据库找嘛”;
10
//id集合
11
$idArr = [];
12
//排序集合
13
s
o
r
t
A
r
r
=
[
]
;
14
f
o
r
e
a
c
h
(
sortArr = []; 14 foreach (
sortArr=[];14foreach(list as $item) {
15
$idArr[] = $item[‘id’];
16
$sortArr[] = $item[‘sort’];
17
}
18
//记录要拖动的id
19
$oldValue =
i
d
A
r
r
[
idArr[
idArr[oldIndex];
20
//删除这个要拖动的id
21
unset(
i
d
A
r
r
[
idArr[
idArr[oldIndex]);
22
//插入新的位置,并自动移位
23
array_splice($idArr, $newIndex, 0, $oldValue);
24
//重新设置排序
25
s
e
t
=
[
]
;
26
f
o
r
(
set = []; 26 for (
set=[];26for(i = 0;
i
<
c
o
u
n
t
(
i < count(
i<count(idArr); $i++) {
27
s
e
t
[
set[
set[i][‘id’] =
i
d
A
r
r
[
idArr[
idArr[i];
28
s
e
t
[
set[
set[i][‘sort’] =
s
o
r
t
A
r
r
[
sortArr[
sortArr[i];
29
}
30
//保存到数据库省略
31
}