table拖动行排序

前段时间，客户反映，系统里有一部分功能需要一个排序，因为这部分数据导出的时候需要严格按照顺序来。但是一直忙于别的需求，没有取考虑这部分内容，周末的时候，客户又反映了这个问题。前端一向不好，英文也很差的我只能求助百度。之后得知jquery ui能满足这种需求。整合项目中也引入了这个js，决定试一试。

前端排序

不得不说jquery ui这个东西强大，只需要两行代码就能再表格上实现界面拖动。

//在table标签加一个class
$( ".sort tbody").sortable(); //移动表格
$( ".sort tbody").disableSelection(); //移动后固定

后端排序

前端排序并不能满足我们的需求，因为需要应用到数据库中，确保刷新后顺序仍然正常。
sorttable提供了几个事件供我们实现数据的排序

var fixHelper = function(e, ui) {  

ui.children().each(function() {  
   $(this).width($(this).width());  //在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了   
 });  
   return ui;  
}; 
//上面部分的代码是我从网上找得，确保移动行的时候，宽度保持不变。这样比较美观


$( ".sort tbody").sort({
    cursor: "move",
    helper: fixHelper,                  //调用fixHelper
    axis:"y",                           //行移动
    start:function(e, ui){
        ui.helper.css({"background":"#fff"})     //拖动时的行，要用ui.helper
        return ui;
    },sort:function(e, ui){

        item = ui.item; //当前拖动的元素
        move_id = item.attr("id"); 
        move_sort = item.attr("sort"); //当前元素的顺序
        //alert(item);
        replace_item = $(this).find('tr').filter('.ui-sort-placeholder').prev('tr');//当移动行时，会出现一个代替行的中间件，因为这个中间件会一直出现在移动行的下方，所以当临界值时会取不到值。
        replace_sort = replace_item.attr('sort');
        replace_id = replace_item.attr('id');


        // 选中的id和sort
        move_sort = parseInt(move_sort);
        move_id = parseInt(move_id);


        // 当从下往上移动时，调整取值（.ui-sort-placeholder）为移动的中间值
        if (move_sort > replace_sort) {
            replace_item = $(this).find('tr').filter('.ui-sort-placeholder').next('tr');
            replace_sort = replace_item.attr('sort');
            replace_id = replace_item.attr('id');
        }
        // 替换的sort 和id
        replace_sort = parseInt(replace_sort);
        replace_id = parseInt(replace_id);

    },stop:function(e, ui){
        // alert(move_id);

        if (move_sort==replace_sort) { //不移动
            return false;
        }else if (isNaN(replace_sort)){
            replace_id = $('.sort tbody').find('tr').eq(1).attr('id');
            replace_sort = $('.sort tbody').find('tr').eq(1).attr('sort');
        }
        if(window.confirm("是否确定排列顺序？")){
            var schedule_id = $("#schedule_id").val();
            var big_media_id = $('#big_media_id').val();
            var csrf = "<?= Yii::$app->request->csrfToken ?>";
            $.post('/subject/sort',{move_id:move_id,
                                    replace_id:replace_id,
                                    move_sort:move_sort,
                                    replace_sort:replace_sort,
                                    schedule_id:schedule_id,
                                    big_media_id:big_media_id,
                                    _csrf:csrf},function(data){
                $(".forajax").empty();
                $(".forajax").append(data);
            })
        }
        // alert('选择'+move_sort);
        // alert('替换'+replace_sort);
        // return false;

  }

});
$( ".sort tbody" ).disableSelection();

上面的代码已经有了可观的注释，下面简单说一下思路。
前端代码使用了三个事件。start、sort、stop。分别是拖动样式配置，拖动过程取值和松开鼠标后的异步提交。

后端的逻辑比较简单，主要是通过在行上的id（主键）sort（排序）。将移动的id和sort，与将要插入位置的id和sort提交到后端。
当从上往下拖的时候（即顺序）。先将插入位置sort以后（不包括）的值加1，再把移动的sort等于插入位置的sort+1.
当从下往上拖的时候（即倒序）。先将插入位置sort及以后（包括）的值加1，再把移动的sort等于插入位置的sort+1.

前端取数的时候需要多加注意，主要考虑临界值的问题和顺序、倒序的问题。确保拖动的值与交换位置的值相对应，避免混乱。 这里思路就不说了，因为需要操作才会发现问题在哪里。

我的逻辑可能比较笨，但是能解决问题。我一般喜欢做法是保证无论正序，倒序。取数一致后再交给后端处理，避免混乱。如果有较好的逻辑也欢迎提供。