分页拖放排序dragsort

本功能针对表格实现分页

需要引用jquery及其插件jqurey.dragsort

处理器参见：  在服务器端实现数据任意排序算法

 

先看一下示例代码：

1 $('table.list').tableDragsort({
2     handler:'/user/sort',     //排序处理器
3     selector:'.moveable',     //拖放对象选择器
4     data:{}                   //附加参数
5     page:2,                   //当前页号
6     pageCount:3               //分页总数
7 });

 

源代码：

 1 $.fn.tableDragsort = function(setting)
 2 {
 3     setting = $.extend({handler:'', selector:'tr', data:{}}, setting);
 4     if($(this).find('tbody tr').length > 1 || $(this).find('tbody tr').length == 1 && setting.page > 1){
 5         var t = $(this);
 6         var cs = $(this).find('tbody tr:first td').length;
 7         if(setting.page > 1){
 8             t.prepend('<tr class="prev"><td colspan="' + cs + '" style="color:#ccc">移到上一页</td></tr>');
 9         }
10         if(setting.page < setting.pageCount){
11             t.append('<tr class="next"><td colspan="' + cs + '" style="color:#ccc">移到下一页</td></tr>');
12         }
13         var ref = function(){
14             t.find("tbody tr").each(function(i){$(this).attr('index', i)});
15             t.find('.prev').attr('id', '-'+t.find('.prev').next().attr('id'));
16             t.find('.next').attr('id', '+'+t.find('.next').prev().attr('id'));
17         }
18         ref();
19         $(this).dragsort({
20             dragSelector: setting.selector,
21             dragBetween: false,
22             placeHolderTemplate: '<tr><td colspan="' + cs + '">&nbsp;</td></tr>',
23             itemSelector: 'tr[index]',
24             dragEnd: function () {
25                 var o = $(this);
26                 var id = o.attr('id');
27                 var i = parseInt(o.attr('index'));
28                 var target_id = 0;
29                 if (parseInt(o.next().attr('index')) < i) {
30                     target_id = o.next().attr("id");
31                 }else if(parseInt(o.prev().attr('index')) > i) {
32                     target_id = o.prev().attr("id");
33                 }
34                 t.find('.next,.prev').hide();
35                 $.post(setting.handler, $.extend(setting.data,{
36                     id: id,
37                     target_id: target_id
38                 }), function (r) {
39                     if (r.status === 1) {
40                         var flag = target_id.substr(0, 1);
41                         if(flag == '+'){
42                             goto(setting.page + 1);
43                         }else if(flag == '-') {
44                             goto(setting.page - 1);
45                         }else{
46                             ref();
47                         }
48                     } else {
49                         artDialog.alert(r.info);
50                         i = i - 1;
51                         if(i > -1)
52                             o.insertAfter(o.parent().find('tr[index="' + i + '"]'));
53                         else
54                             o.prependTo(o.parent());
55                     }
56                 });
57             }
58         }).find('tr[index] '+ setting.selector).bind('mousedown', function(){
59             t.find('.next,.prev').show();
60         }).bind('mouseup', function(){
61             t.find('.next,.prev').hide();
62         }).trigger('mouseup');
63     }
64     return $(this);
65 }

 

转载于:https://www.cnblogs.com/freewing/p/4383781.html