jquery 实现表格拖拽排序
1、引⼊：jQuery ⽂件和jquery-ui.js 假设我们有这么⼀个table ：给table 中id 随便去个名字，我去的名字是：sortable
如果我进⾏任何操作，仅仅只是拖拽的话，以下两⾏代码就可以啦；但是我们往往是希望能把我们排好的顺序通过发送请求保存到后台数据库⾥⾯去！
所以我们需要以下的配置；
<script src ="@{'/public/javascripts/jquery-1.11.1.min.js'}" charset ="UTF-8"></script ><script src ="@{'/public/javascripts/jquery-ui.min.js'}" charset ="UTF-8"></script >
1
2<table class ="table table-striped table-bordered table-hover" id ="sortable"> <thead > <tr > <th style ="text-align: center;">序号</th > <th style ="text-align: center;">名称</th > <th style ="text-align: center;">类型代码</th > <th style ="text-align: center;">含义</th > <th style ="text-align: center;">是否显⽰</th > <th style ="text-align: center;">操作</th > </tr > </thead ><tbody > #{list items:eventTypeList, as:'n'} #{if n.status ==1} <tr class ="ite
m" aid ="${n.id}" id ="${n.id}" sort ="${n.sort}"> <td >${n.sort}</td > <td >${n.radar_name}</td > <td >${n.radar_code}</td > <td >${n.remark}</td > <td >显⽰</td > <td ><button class ="btn btn-primary edit" tid ="${n.id}">修改</button ></td > </tr > #{/if}#{/list}</tbody ></table >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jquery在项目里是干啥的18
19
20
21
22
23
24
25
26$( "#sortable").sortable();$( "#sortable").disableSelection();
1
2var fixHelper = function (e, ui) { //console.log(ui) ui.children().each (function () { $(this ).width($(this ).width()); //在拖动时，拖动⾏的cell （单元格）宽度会发⽣改变。在这⾥做了处理就没问题了 }); return ui; }; $(function () { $( "#sortable tbody").sortable({ cursor: "move", helper: fixHelper, //调⽤fixHelper axis:"y", start:function (e, ui){
ui.helper.css({"background":"#fff"}) //拖动时的⾏，要⽤ui.helper
1
2
3
4
5
6
7
8
9
10
11
12
13
14
ui.helper.css({"background":"#fff"}) //拖动时的⾏，要⽤ui.helper return ui;},sort:function (e, ui){array = []; select_item = ui.item; //当前拖动的元素var select_id = select_item.attr("id"); select_sort = select_item.attr("sort"); //当前元素的顺序//alert(select_item);place_item = $(this ).find('tr').filter('.ui-sortable-placeholder').next('tr');//新位置下的下⼀个元素place_sort = place_item.attr('sort');place_sx = parseInt(place_sort);select_sx = parseInt(select_sort);if (select_sx > place_sx){ //说明是 向上移动//array.push(select_id);temp = place_sort;place_sx = select_sort;//最⼤select_sx = temp;//最⼩flag = false ;}else { //向下移动 place_sort = $(this ).find('tr').filter('.ui-sortable-placeholder').prev('tr').attr('sort'); place_sx = parseInt(place_sort); flag = true ;}}, stop:function (e, ui){ //veClass("ui-state-highlight"); //释放⿏标时，要⽤ui.item 才是释放的⾏ //发送请求，对sort 字段进⾏修改 //alert(ui.item.attr("id"));//可以拿到id //alert(p);//可以拿到id var temp = ""; #{list items:eventTypeList, as :'n'} var sort = p
arseInt(${n.sort}); if (sort >= select_sx && sort <= place_sx){ if (sort == parseInt(select_sort)){//当前拖拽的元素 向上拖拽，当前元素放在数组第⼀个，向下，放在数组最后⼀个 if (flag){//向下 - 按顺序来 temp = ${n.id}; }else {//向上排序 array.splice(0,0,${n.id}); } }else { array.push(${n.id}); } }#{/list}if (flag){ array.splice(place_sx-select_sx,0,temp); }if (firm("确定这么排吗？")){ $.ajax({ url:'/EventAction/sortTable', type:'POST', async: false , data:{'ids':array, selectSx:select_sx, placeSx:place_sx}, datatype:'json', success:function (data){ alert(data.data); load(); }, error:function (){
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
以上是我的代码；
其中名为fixHelper 的函数⽅法是为了在拖拽⾏时，单元格的宽度保持不变！
主要的部分就是：这⾥⾯⼀些固定的配置：以上配置没什么好说的，都是常⽤的固定配置。
之后，我的⽅法⾥⾯写了start:function(e,ui){},sort:function(e,ui){},stop:function(e,ui){}事件。
start 事件是：当排序动作开始时触发此事件。
我的设置是ui.helper.css({"background":"#fff"}) //拖动时的⾏，要⽤ui.helper
return ui;
sort 事件是：当元素发⽣排序时触发此事件
在这⾥我进⾏业务逻辑的处理；
当前拖拽的元素我可以通过ui.item 来获取。
如果我们向上拖拽，那么我就要获取拖拽后新位置的下⼀个元素。
如果我们向下拖拽，那么我就要获取拖拽后新位置的上⼀个元素。
为什么要这样获取呢？因为要获取到底哪些⾏受到了影响。 举例 table 表格总共有1,2,3,4,5,6,7,8,9,10⾏。
假设我拖住的是第6⾏，把6移到了3的位置，也就是受到影响的⾏时3,4,5,6.
并且新的顺序是6,3,4,5.其他⾏没有受到影响，就不⽤进⾏处理。那么我怎么知道哪些⾏受到影响呢！当你移到新的位置时，你可以通过新的位置去它的下⼀个元素，这⾥就是3这个元素。这样我们就知道是3到6⾏受到影响；这个是向上拖拽。向下拖拽同理。
我们还要知道两点：
1、当我们在进⾏拖拽时，被拖拽的当前⾏的样式class 是会发⽣改变的！插件会给它添加⼀个名为：ui-sortable-helper 类。如果不使⽤ui.item 来获取当前元素，也可以通过这个类来获取。
2、当我们移动的时候，该插件会在新的位置，放置⼀个起到占位符的元素，该元素的class 为：ui-sortable-placeholder 。所以在拖拽过程的事件中，我们可以通过该类来获取新位置的上⼀个元素或者下⼀个元素。
插件添加的class 在拖拽结束后都会移除掉！
代码如下：
error:function (){ alert('保存排序异常'); } }); }else { $(this ).sortable( 'cancel' ); } return ui; }, }); $( "#sortable" ).disableSelection();});
77
78
79
80
81
82
83
84
85
86
87
88
89$( "#sortable tbody").sortable({ ...});
1
2
3cursor: "move",helper: fixHelper, //调⽤fixHelper axis:"y", //拖拽⽅向是上下拖拽，x 就是横向拖拽
1
2
3$(this ).find('tr').filter('.ui-sortable-placeholder').prev('tr');//上⼀个元素$(this ).find('tr').filter('.ui-sortable-placeholder').next('tr');//下⼀个元素
1
2
stop 事件是：当排序动作结束时触发此事件。
在这个事件⾥依然也是业务逻辑的处理。
sort 事件⾥我只是获取到了当前元素位置、新位置的上⼀个或者下⼀个元素的位置(也就是两个参数)。在stop 事件⾥，我将通过这两个参数来把受影响的⾏组装成新的顺序，并放到array 数组中去。再通过ajax 发送到后台保存到数据库⾥去！stop 事件中逻辑处理代码：数据库表中有个sort 字段，专门⽤来记录顺序的！
最后$(“#sortable”).disableSelection();//防⽌拖拽时选中⽂本内容！var temp = "";#{list items:eventTypeList, as:'n'} var sort = parseInt(${n.sort}); if (sort >= select_sx && sort <= place_sx){ if (sort == parseInt(select_sort)){//当前拖拽的元素 向上拖拽，当前元素放在数组第⼀个，向下，放在数组最后⼀个 if (flag){//向下 - 按顺序来 temp = ${n.id}; }else {//向上排序 array .splice(0,0,${n.id}); } }else { array .push(${n.id}); }}#{/list}if (flag){ array .splice(place_sx-select_sx,0,temp); //第⼀个参数是添加/删除项⽬的位置，第⼆个参数是：删除的项⽬数量 0就是不会删除项⽬ 第三个参数添加新项⽬}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论