ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）

最新推荐文章于 2025-06-10 09:02:21 发布

原创

最新推荐文章于 2025-06-10 09:02:21 发布 · 9.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #sql

本文介绍如何使用 ZTree 实现仅限同级节点的拖拽排序功能，并详细展示了JSP页面的JS代码、Controller层、Service层及Mapper层的实现方法。博主希望借此分享这一实用功能，并期待读者分享更高效、简洁的排序保存策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

     //拖拽前执行
     var dragId;
     function beforeDrag(treeId, treeNodes) {
            for (var i=0,l=treeNodes.length; i<l; i++) {
                   dragId = treeNodes[i].pId;
                 if (treeNodes[i].drag === false) {
                      return false;
                }
           }
            return true;
     }
      //拖拽释放之后执行
     function beforeDrop(treeId, treeNodes, targetNode, moveType) {
             if(targetNode.pId == dragId){
                  var data = {id:treeNodes[0].id,targetId:targetNode.id,moveType:moveType};
                  var confirmVal = false;
                  $.ajax({
                       async: false,
                       type: "post",
                       data:data,
                       url:"<%=request.getContextPath() %>/library/updateLibrarySort/ ",
                       success: function(json){
                             if(json=="success" ){
                                  confirmVal = true;
				  alert('操作成功!');
                             } else{
				  alert('亲，操作失败');
                             }
                       },
                       error: funct