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.

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

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