认真的人才讨别人喜欢

拖放排序并保存至数据库的解决
发表于2018-12-29 17:15:06 | 分类:技术 | 阅读:38

之前遇到项目元素自由排序问题时,是通过给元素添加新字段序号,并通过序号大小来进行排序,但是项目元素多了之后,填写编号的时候很容易混乱。最终想到使用拖放排序来解决这个问题,所见即所得。


拖放排序插件 - DDSort(jQuery,插件原理可以直接百度)- 点击下载


以文字直播为例,自由拖放调整直播内容的顺序,本文主要解决将顺序到保存至数据库的过程。


>>思路1:在每一条文字直播内容添加新字段序号,整体直播按该序号排序,每一次拖放完成,通过ajax更改序号。

(放弃原因:假如拖放第1条直播内容【序号为1】到第10的位置【序号变成10】,旧的9条直播内容序号也要依次-1,这样需要同时更新10条数据,每次拖放就要完成好几条数据的更新,感觉对数据库负荷挺大的。)


>>思路2:在文字直播房间的表中添加一个字段,专门存直播内容的排序的序号,就可以按指定顺序进行排序。


a)解决指定顺序进行排序问题


   MySQL按照指定顺序进行排序主要是通过field函数
   
   SELECT * From table ORDER BY FIELD(coulmn,str1,str2,str3…);
   
   例:假设table是存放每条文字直播内容的数据表,coulmn是其字段ID,后续str1,str2,str3分别是3,1,2。那么查询结果就会按照ID(3,1,2)的顺序排序。


TIM图片20181229115456.png


b)获得每次拖放之后的排序


   插件内元素的原布局
   <div id="wrap">
       <ul>
	  <li>
	     第一条直播信息内容
	  </li>
	  <li>
	     第二条直播信息内容
	  </li>
	  <li>
	     第三条直播信息内容
	  </li>
       </ul>
   </div>
   
   在标签li上添加属性data-id="ID",ID即每条数据的字段ID,就是我们要指定顺序。
   
   通过jq获得当前元素排序的ID串即arr。
   var li=$("#wrap ul li");
   var arr=[];
   for(var i=0;i<li.length;i++){
      var id=$(li[i]).attr("data-id");
      arr.push(id);
   }
   
   这段代码放需要添加到文件ddsort.js中mouseup.DDSort的方法中,即每次鼠标松开完成一次拖放行为后,输出当前元素的排序。
   
   !!该数据可以在每次拖放完成时通过ajax即时更新;也可以等拖放后确认所有顺序正确之后,再通过点击保存按钮表单提交更新。


c)优化


状况:一次文字直播的内容不可能少于十条,如果进行拖放排序操作,把全部内容一次性加载出来,可能会造成卡顿,所以将文字直播内容分页加载再进行处理。


   因为分页后,拖放排序获得的指定排序只有当前页的顺序。
   
   例:假设元素有5个,ID从1到5排序,指定顺序为1,2,3,4,5
   现在每2条数据进行一次分页,修改第二页的数据,只有3和4两个元素,更改为4在先3在后的顺序,获得当前元素的排序:4,3
   如果直接将排序更新至指定顺序字段,就会丢失1,2和5
   所以提交时要判断当前页的页码,需要在指定位置上更新部分的排序。
  
   具体解决方法(PHP):
   
   主要函数:array_splice($arr,$start,$num,$arr2)    
   参数一:被操作的数组
   参数二:被操作数组的开始位置
   参数三:偏移量
   参数四:要替换成的元素
   
   $num=2;                   //以几条数据为一页进行分页,当前每2条数据进行一次分页
   $page=2;                  //当前页
   $sort=1,2,3,4,5           //原来全部元素的排序
   $newsort=4,3;             //当前元素点击保存后表单提交的排序
   $start=($page-1)*$num;    //开始位置
   
   $sort=explode(",",$sort);            //字符串转换成数组
   $newsort=explode(",",$newsort);      //字符串转换成数组
   array_splice($sort,$start,$num,$newsort);   //在数组指定位置替换值
   $sort=implode(",",$sort);            //再将数组转换成字符串(1,2,4,3,5)更新至数据库字段


PS分页之后进行拖放排序就只能是当前页的的排序,以$num=10条为一个单位进行分页,每次就只能调整1到10,或11到20的顺序。


再PS:如果刚好第1页的某一条数据要调整到第2页中,即第5条数据要放到第15条的位置上时,我们可以把短暂把$num改成15,以15条数据为一个单位进行分页,调整1到15的顺序,然后再进行保存。就是$num放在地址栏的参数上(http://localhost:8080/sort/?page=1&num=10),默认为10,随时可手动更改,毕竟一般情况下,要插入一条文字直播内容的跨度也不可能太大,不然也没人可以翻到前面再看到插入的内容。


再再PS特殊情况下的跨页大规模排序,即一家商店的所有商品的显示顺序调整,我们可以直接手动更改$num为最大值,一次性加载所有数据进行拖放排序,偶尔等待一次超长时间的加载就好。


打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮
点击此处,取消分享

上一篇:快递100推送物流追踪信息的探索

下一篇:没有了

*以下内容皆为必填项目

0条评论

暂无评论
TOP