Layui——使用插件实现：table表格行顺序的改变

参考：https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/basic/row-drag

使用的是layui-soul-table插件

注意：严格按照官网的安装步骤执行，（自己存在的问题：因为自己项目的要求只需要实现行移动，所以就以为这个插件下的js文件只需要导入soulTable.js。结果报错。。。所以还是全部导入就好了）

实现思路：页面触发行移动的操作（通过layui-soul-table插件实现）》访问服务器修改修改数据库中存储的数据序号

》回到前端，回调函数：重载表格（表格顺序是按数据序号排序的）》这样就实现了数据排序的变化

 除此自外还需要考虑：1.新增的数据序号应该是：新增前最大序号+1=》实现：将序号从0开始，那么新增数据的序号就是数据总数（复合sql）： insert into course
        (cname,pl_id,season,time,weather,l_id,csort)
        SELECT #{cname},#{pl_id},#{season},#{time},#{weather},#{l_id},count(*) FROM course

 2.删除时，要考虑序号时连贯的，所以排在删除数据后的数据序号需要-1

对应sql：通过id找到从哪个csort开始，

update Course set
        csort=csort-1 where csort >(SELECT * from (select csort from course where cid=19031) as a)

难点：

触发行改变时调用的方法：

,rowDrag: { done: function(obj) {
               // 完成时（松开时）触发
               // 如果拖动前和拖动后无变化，则不会触发此方法
               //调用后台，修改场景顺序：
         		$.ajax({
			"async":false,
			data: JSON.stringify(obj.row),
			dataType:"json",
			method:"post",
			headers:{//因为服务器使用@RequestBody接受请求参数，所以设置请求头
          	   "content-Type":'application/json'
             },
			"url":"${pageContext.request.contextPath}/course/editSort?oldIndex="+obj.oldIndex+"&newIndex="+obj.newIndex,
			"success":function(data){
			    //执行重载
	               table.reload('tableOne', {
	                   page: {
	                	   curr: $(".layui-laypage-em").next().html(),  //刷新后保持当前页，当前页码
                           limit:$(".layui-laypage-limits").find("option:selected").val()//当前的每页显示条数
	                   }
	               
	               }, 'data'); 
					
				}
			
		})  
            
           
           }}
    ,done: function () {
        soulTable.render(this);
    }

3.序号上移或下移

对应sql：