实例:实现前端拖拽排序后,后端处理排序

编程知识 更新时间:2023-04-03 22:01:59

最近在对人人商城进行二次开发时需要完善自定义用户字段,对字段进行实时排序;接下来分享拖拽排序思路,以下排序效果不适合数据量大的排序,适合后台管理系统。
首先需要明白是以什么进行排序,这里是用表中的sort字段进行排序,sort的值与id相同,这样避免拖动改变id时造成id的混乱。
总体的思路是将排序过后的sort与排序前的sort进行验证,变动过的则更新。
前端排序:采用jquery-ui中的sortable来实现拖拽排序,自行参考官方文档
排序效果如下:

前端将排序后的id以数组的形式发送到后端:
传到后端的数据如下:

ids[]: 2
ids[]: 1
ids[]: 4
ids[]: 6
ids[]: 15
ids[]: 16
这是排序过后的id数组(Array)
采用jquery-ui中的sortable来实现拖拽排序,

前端ajax代码如下:

 <script>
        $( function() {         
            $( "xxx" ).sortable({
              cancel: 'xxx',	
              items: 'xxx',
              update : function(event, ui) //update这段是核心,其他请自行参考官方文档
			  {//更新排序之后
                $.ajax({
                    url: "Controller/sorts",//后端处理地址
                    type: 'POST',
                    data : 
					{
                        ids: $(this).sortable("toArray")	//排序后的id,Array
                    },
                    dataType: 'json'
                });
              }
            });
            $( "xxx" ).disableSelection();
        });
        </script>

后端比较排序前的sort与排序后的sort的位置 ,验证通过则更新排序
后端代码:

		//第一步:获取前端传递来的Array
		$id = $_POST['ids'];
		//第二步:查询出排序前的sort,从小到大的排序方式(展示的时候也要以这个排序规则)
		$items = 查询("SELECT sort FROM 表名 ORDER BY `sort` ASC");
		//第三步:交换排序
		foreach ($items as $k=>$v) 
		{
			//查询变动过后的排序
			$sort = 查询( "SELECT id,sort FROM 表名 WHERE id = ".$id[$k] );
			//排序后,并且是变动过位置了
			if($v['sort'] != $sort['sort'])
			{
				//dump($sort['sort']);
				//更新排序,更新条件:id=$sort['id'],更新内容:sort=$v['sort']
				更新('表名', array('sort' => $v['sort']), array('id' => $sort['id']));
			}
		}

更多推荐

实例:实现前端拖拽排序后,后端处理排序

本文发布于:2023-04-03 22:01:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/96c714630a1e25fe748f9619ab3fd6d1.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:实例   拖拽   后端

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 40145文章数
  • 14阅读数
  • 0评论数