layui soulTable springboot 拖动行排序,亲测可用的

本文介绍了如何使用layui的soulTable组件与SpringBoot配合,实现在网页上的表格行拖动排序功能。通过JavaScript处理前端交互,当用户拖动行后,将新的顺序信息发送到后台。后台使用SpringBoot接收请求,返回更新后的JSON数据,以完成数据的重新排序。请注意,数据库的更新操作需参考作者之前的文章,涉及高效批量更新的Mybatis和SpringBoot应用。
摘要由CSDN通过智能技术生成

html:

    <table id="goodsTable" lay-filter="goodsTable" ></table>

js:

     layui.use(['table','form','soulTable'], function(){
   
            var  table = layui.table //表格
            soulTable = layui.soulTable;
  
                table.render({
   
                    elem: '#goodsTable'
                    ,url: '/shopGoods/findShopGoodsListByCategoryId'
                    ,toolbar: true 
                    ,method: 'post'
                    ,where: {
   categoryId: categoryId}
                    ,page: true //开启分页
                    ,limit: 10
                    ,id:"goodListId"
                    ,cellMinWidth: 60
                    , response: {
   
                        statusName: 'code', //数据状态的字段名称,默认:code
                        statusCode: 200, //成功的状态码,默认:0
                        countName: 'totals', //数据总数的字段名称,默认:count
                        dataName: 'list' //数据列表的字段名称,默认:data
                    }
                    ,rowDrag: {
    done: function(obj) {
   
					
					  // 完成时(松开时)触发
                       // 如果拖动前和拖动后无变化,则不会触发此方法

                        //当前页面
                        var currentPageNum = $(".layui-laypage-em").next().html();
                        var pageData= obj.cache;
                        if (currentPageNum>0) {
   
                            var ids = "";
                            if (categoryId == null || categoryId == '') {
   
                                //执行重载,刷新表格
                                table.reload('goodListId', {
   
                                    page: {
   
                                        curr: $(".layui-laypage-em").next().html(),  //刷新后保持当前页,当前页码
                                        limit:$(".layui-laypage-limits").find("option:selected").val()//当前的每页显示条数
                                    }

                                }, 'data');
                                layer.alert("请先选择分类!")
                            } else {
   
                                var array = new Array();
                                for (var i = 1; i <= pageData.length; i++) {
   
                                    var item = pageData[i - 1];
                                    item.sortNum = (i + (currentPageNum - 1) * 10)
                                    array.push({
   
                                        shopGoodsId: item.shopGoodsId,
                                        sortNum: (i + (currentPageNum - 1) * 10)
                                    });
                                
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值