zoukankan      html  css  js  c++  java
  • 分页拖放排序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 }
  • 相关阅读:
    ASP.NET面试资料【六】
    让Google帮你托管AJAX库
    JavaScript:prototype属性使用说明【转】
    如何存储Session
    给HyperLink控件连接资源文件
    Atcoder Regular Contest 096 D Sweet Alchemy(贪心+多重背包)
    NOI2021 去不了记
    一个测试你的浏览器支持多少HTML5元素的网站
    json怎么读
    QT元件(QTableView、QSql*之类)的最好开在堆空间中用指针操作
  • 原文地址:https://www.cnblogs.com/freewing/p/4383781.html
Copyright © 2011-2022 走看看