ztree实现同级拖拽排序并将排序结果保存数据库

 ztree这个系列的最后一篇，也是ztree功能强大的体现之一——排序功能。ztree可以实现所有节点之间随意的拖拽排序功能，我这里根据需要实现了只允许同级之间随意拖拽排序，其实原理都一样，只是范围缩小了一些，多了一些判断而已。下面是每一层的代码，还是采取只贴出功能代码，因为这个拖拽排序功能我感觉很不错，所以单独拿出一篇博客来展示，也方便理解。

Jsp页面实现功能的js代码如下：

1. //拖拽前执行

2. var dragId;

3. function beforeDrag(treeId, treeNodes) {

4. for (var i=0,l=treeNodes.length; i<l; i++) {

5. dragId = treeNodes[i].pId;

6. if (treeNodes[i].drag === false) {

7. return false;

8. }

9. }

10. return true;

11. }

12. //拖拽释放之后执行

13. function beforeDrop(treeId, treeNodes, targetNode, moveType) {

14. if(targetNode.pId == dragId){

15. var data = {id:treeNodes[0].id,targetId:targetNode.id,moveType:moveType};

16. var confirmVal = false;

17. $.ajax({

18. async: false,

19. type: "post",

20. data:data,

21. url:"<%=request.getContextPath() %>/library/updateLibrarySort/ ",

22. success: function(json){

23. if(json=="success" ){

24. confirmVal = true;

25. alert('操作成功!');

26. } else{

27. alert('亲，操作失败');

28. }

29. },

30. error: function(){

31. alert('亲，网络有点不给力呀！');

32. }

33. });

34. return confirmVal;

35. } else{

36. alert('亲，只能进行同级排序！');

37. return false;

38. }

39. }

Controller层代码如下：

2. @RequestMapping(value="updateLibrarySort/")

3. @ResponseBody

4. public String updateLibrarySort(HttpServletRequest request, HttpServletResponse response,LibraryVo libraryVo) {

5. String createname=(String) request.getSession().getAttribute(Constants.CURRENT_USER_NAME);

6. return libraryService.updateLibrarySort(libraryVo,createname);

7. }

service层代码如下：

2. public String updateLibrarySort(LibraryVo libraryVo,String userName){

3. int numFlag = 0;

4. Library libraryT = libraryMapper.selectByPrimaryKey(libraryVo.getTargetId());//目标分类信息

5. Library library = libraryMapper.selectByPrimaryKey(libraryVo.getId());//拖动分类信息

6. library.setTarget_order_id(libraryT.getOrder_id());

7. library.setUpdate_time(new Date());//设置时间

8. library.setUpdate_user(userName);//设置操作人

9. libraryT.setUpdate_time(new Date());//设置时间

10. libraryT.setUpdate_user(userName);//设置操作人

11. Map<String,Object> libraryMap = new HashMap<String, Object>();//参数集合

12. if (libraryVo.getMoveType().equals("prev")) {//向前移动

13. libraryMap.put("pid", library.getPid());

14. libraryMap.put("order_id", library.getTarget_order_id());

15. libraryMap.put("target_order_id", library.getOrder_id());

16. List<Library> listLibraryFlag = libraryMapper.findLibraryListByOrderId(libraryMap);

17. int order_id = libraryT.getOrder_id() + 1;

18. library.setOrder_id(libraryT.getOrder_id());

19. libraryT.setOrder_id(order_id);

20. for (int i = 0; i < listLibraryFlag.size(); i++) {//更新所有受影响的排序字段

21. Library ly = listLibraryFlag.get(i);

22. if(!(ly.getId()).equals(library.getId()) && !(ly.getId()).equals(libraryT.getId())){

23. ly.setUpdate_time(new Date());

24. ly.setUpdate_user(userName);

25. ly.setOrder_id(ly.getOrder_id()+1);

26. libraryMapper.updateOrderId(ly);//更新其他受影响的分类信息

27. }

28. }

29. libraryMapper.updateOrderId(library);//更新拖动分类信息

30. numFlag = libraryMapper.updateOrderId(libraryT);//更新目标分类信息

31. }else if(libraryVo.getMoveType().equals("next")){//向后移动

32. libraryMap.put("pid", library.getPid());

33. libraryMap.put("order_id", library.getOrder_id());

34. libraryMap.put("target_order_id", library.getTarget_order_id());

35. List<Library> listLibraryFlag = libraryMapper.findLibraryListByOrderId(libraryMap);

36. int order_id = libraryT.getOrder_id();

37. library.setOrder_id(order_id);

38. libraryT.setOrder_id(order_id - 1);

39. for (int i = 0; i < listLibraryFlag.size(); i++) {//更新所有受影响的排序字段

40. Library ly = listLibraryFlag.get(i);

41. if(!(ly.getId()).equals(library.getId()) && !(ly.getId()).equals(libraryT.getId())){

42. ly.setUpdate_time(new Date());

43. ly.setUpdate_user(userName);

44. ly.setOrder_id(ly.getOrder_id() - 1);

45. libraryMapper.updateOrderId(ly);//更新其他受影响的分类信息

46. }

47. }

48. libraryMapper.updateOrderId(library);//更新拖动分类信息

49. numFlag = libraryMapper.updateOrderId(libraryT);//更新目标分类信息

50. }else{

51. //

52. }

53. return ServiceUtil.ReturnString(numFlag);

54. }

Mapper层代码如下

2. public List<Library> findLibraryListByOrderId(Map<String,Object> library);

4. public int updateOrderId(Library library);

对应的xml代码如下：

1. < sql id= "Base_Column_List" >

2. id, pid , name, create_time, update_time, is_delete, update_user, create_user, level_id,

3. order_id

4. </ sql>

5. <!-- 更新order_id -->

6. < update id= "updateOrderId" parameterType="Library" >

7. update onair_vms_library

8. <set >

9. update_time = #{update_time},

10. update_user = #{update_user},

11. order_id = #{order_id}

12. </set >

13. where id = #{id}

14. </ update>

15. <!-- 根据 pid、order_id和target_order_id查询所有受影响的信息 -->

16. < select id= "findLibraryListByOrderId" resultMap= "BaseResultMap" parameterType ="java.util.Map" >

17. select

18. <include refid ="Base_Column_List"/>

19. from onair_vms_library

20. where order_id between #{order_id} and #{target_order_id} and pid = #{ pid}

21. </ select>

       写的一般，不对的地方欢迎指正，有高效或者更加简便的办法希望能够共享一下，尤其是在排序功能执行保存的时候如果能够不使用循环一条sql能搞定就更加强大了，欢迎大家指点。

--------------------- 本文来自 黄爱岗 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/huangaigang6688/article/details/27381289?utm_source=copy