jquery-sortable.js的使用，后台双向列表排序

最新推荐文章于 2025-07-01 15:10:19 发布

AtomDCM

最新推荐文章于 2025-07-01 15:10:19 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_40607363/article/details/80118048

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的表格拖拽排序方法，通过定制化的JavaScript和CSS样式，使得表格能够支持行间拖拽，并在拖拽结束后通过AJAX请求更新服务器上的排序信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入js：

<script type="text/javascript" src="${base}/js/commons/jquery-1.11.0.min.js" charset="utf-8"></script>

<script type="text/javascript" src="${base}/js/jquery-sortable/jquery-sortable.js" charset="utf-8"></script>

样式

<style>
    body.dragging, body.dragging * {
        cursor: move !important;
    }
    .dragged {
        position: absolute;
        opacity: 0.5;
        z-index: 2000;
    }
    tbody tr.placeholder {
        position: relative;
        /** More li styles **/
    }
    tbody  tr.placeholder:before {
        position: absolute;
        /** Define arrowhead **/
    }

</style>

设置class

<table class="sortable"  id="table"
       data-striped="true"
       data-search="false"
       data-show-refresh="true"
       data-show-toggle="false"
       data-show-columns="false"
       data-show-export="false"
       data-detail-view="false"
       data-minimum-count-columns="2"
       data-show-pagination-switch="false"
       data-pagination="true"
       data-id-field="id"
       data-sort-name="createDate"
       data-sort-order="desc"
       data-page-list="[10, 25, 50, 100, ALL]"
       data-method="post"
       data-content-type="application/x-www-form-urlencoded"
       data-cache="false"
       data-smart-display="true"
       data-show-footer="false"
       data-side-pagination="server"
        >
</table>

js：

$(function(){

//排序
$("tbody").sortable({                //这里是talbe tbody，绑定 了sortable
    helper: fixHelper,                  //调用fixHelper
    axis:"y",
    start:function(e, ui){
        ui.helper.css({"background":"#fff"})     //拖动时的行，要用ui.helper
            //下一行中的第一个<td>的值    <td>下标从0开始
/*        console.log(ui.item.prev("tr").children("td").eq(0).text()) //前一个元素的id
        console.log(ui.item.children("td").eq(0).text());//当前行id
        console.log(ui.item.next("tr").children("td").eq(0).text());//后一个元素的id*/
        return ui;
    },
    stop:function(e, ui){//排序结束

        //ui.item.removeClass("ui-state-highlight"); //释放鼠标时，要用ui.item才是释放的行
       // console.log(ui.item.attr("data-index"))
        console.log(ui.item.prev("tr").children("td").eq(0).text()) //前一个元素的id
        console.log(ui.item.children("td").eq(0).text());//当前行id
        console.log(ui.item.next("tr").children("td").eq(0).text());//后一个元素的id

        var resultPreId  = ui.item.prev("tr").children("td").eq(0).text();
        var resultCurrId = ui.item.children("td").eq(0).text();
        var resultNextId = ui.item.next("tr").children("td").eq(0).text();
        if(window.confirm("确定这么排吗？")){
            $.ajax({
                url: URLObject.sortUrl,
                type:'POST',
                async: false,
                data:{
                    resultPreId :resultPreId,
                    resultCurrId :resultCurrId,
                    resultNextId : resultNextId
                },
                dataType:'json',
                success:function(data){
                    if(data.flag == 1 || data.flag == "1") {
                        WinAlert.jAlert("提示", data.msg, function() {
                            $("#table").bootstrapTable("refresh");
                        });
                    } else {
                        WinAlert.jAlertError("操作失败", data.msg);
                    }
                },
                error:function(){
                    WinAlert.jAlertError("操作失败", data.msg);
                }
            });
        }else{
            $(this).sortable( 'cancel' );
        }
        return ui;
    }
}).disableSelection();

})

//在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了
var fixHelper = function(e, ui) {
    console.log(ui)
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};