无限树的增删改节点

最新推荐文章于 2019-09-30 11:27:33 发布

这只是个昵称

最新推荐文章于 2019-09-30 11:27:33 发布

阅读量486

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/chen2250/article/details/52172156

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前台：

<!DOCTYPE html>
<HTML>
<HEAD>
   <TITLE> ZTREE DEMO - Simple Data</TITLE>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="${pageContext.request.contextPath}/css/demo.css" type="text/css">
   <link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle/zTreeStyle.css" type="text/css">
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ztree.all.min.js"></script>

   <SCRIPT type="text/javascript">

       var setting = {
           data: {
               simpleData: {
                   enable: true,
                   idKey: "id",
                   pIdKey: "pId",
                   rootPId: 0
               }
           }
       };

       var zNodes;
       var zTreeObj;
       var ids = [];//选中的节点及所有子节点的集合
        $(document).ready(function(){
                    $.ajax({
                        async : false, //默认是true，异步请求。此处为同步，则同步请求将锁住浏览器，用户其他操作只有等请求完成后才能执行
                        cache:false, //设置为false将不会从浏览器缓存中加载请求信息。
                        type: 'POST', //请求方式 get或post
                        dataType : 'json', //须是string类型的参数，预期从服务器返回的数据类型，此处为json格式的。
                        url: 'tree/showTreeNodes.action',//请求的action路径
                        error: function () {//请求失败处理函数
                            alert('请求失败');
                        },
                        success:function(data){ //请求成功后回调函数。 data由服务器返回，并根据dataType参数进行处理后的数据。
                           zNodes = data;   //把后台封装好的简单Json格式赋给zNodes
                        }
                    });

                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);

                    zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            });



        // 将新增加的节点数据更新到后台
        function addChange(newNodes){
           $.ajax({
                 async : true, //默认是true，异步请求。如果为同步，则同步请求将锁住浏览器，用户其他操作只有等请求完成后才能执行
                 cache:false, //设置为false将不会从浏览器缓存中加载请求信息。
                 contentType:'application/json;charset=UTF-8',
                 type:'POST', //请求方式 get或post
                 data:JSON.stringify(newNodes),
                 dataType : 'json', //须是string类型的参数，预期从服务器返回的数据类型，此处为json格式的。
                 url: 'tree/addTreeNode.action',//请求的action路径
                 error: function () {//请求失败处理函数
                     alert('请求失败');
                 },
                 success:function(data){ //请求成功后回调函数。 data由服务器返回，并根据dataType参数进行处理后的数据。
                    zNodes = data;   //把后台封装好的简单Json格式赋给zNodes
                 }
             });


           //$.fn.zTree.init($("#treeDemo"), setting, zNodes);
      }

        /*
           增加节点
        */
       function addNodes(){
           //var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
           var nodes = zTreeObj.getSelectedNodes();
           var newNodes = null;

           //获得选中节点的id
           var id = nodes[0].id;
             var max=0;

             $.ajax({
             async:false, //默认是true，异步请求。如果为同步，则同步请求将锁住浏览器，用户其他操作只有等请求完成后才能执行
             cache:false, //设置为false将不会从浏览器缓存中加载请求信息。
             //contentType:'application/json;charset=UTF-8',
             type:'POST', //请求方式 get或post
             //data:JSON.stringify(newNodes),
             dataType:'text', //须是string类型的参数，预期从服务器返回的数据类型。
             url:'tree/handleMax.action',//请求的action路径
             error:function () {//请求失败处理函数
                 alert('请求失败');
             },
             success:function(data){ //请求成功后回调函数。 data由服务器返回，并根据dataType参数进行处理后的数据。
                max = data;   //把后台封装好的简单Json格式赋给zNodes
             }
         });

             //弹出输入框,获取输入框的内容
           var nameStr = prompt("请输入节点名称","");
             var newNodes = {id:max,pId:id,name:nameStr};
           //新增节点
           zTreeObj.addNodes(nodes[0],newNodes);
             //调用addChange方法，将新增加的节点数据更新到后台
             addChange(newNodes);

        }

        //删除节点
        function removeNodes(){
           var nodes = zTreeObj.getSelectedNodes();
           var length1 = nodes.length;
           for(var i = 0;i<length1;i++){
               remove(nodes[i]);//调用递归函数
               var nodeId = nodes[i].id;
               ids.push(nodeId);
               //zTreeObj.removeNode(nodes[i]);
           }
           var idss = unique(ids);
           var strIds = idss.join("#");

           $.ajax({
               async:false,
                 cache:false,
                 //contentType:'application/json;charset=UTF-8',
                 type:'POST',
                 data:"data="+strIds,
                 dataType:'json',
                 url:'tree/deleteTreeNodesTwo.action',
                 error:function () {
                     alert('请求失败');
                 },
                 success:function(data){
                    zNodes = data;
                 }
           });

           $.fn.zTree.init($("#treeDemo"),setting,zNodes);

      }


        //递归函数
        function remove(node){
           if(node.isParent){
               var childrenNodes = node.children;
               var length = childrenNodes.length;
               for(var j=0;j<length;j++){
                   var childId = childrenNodes[j].id;
                   remove(childrenNodes[j]);//递归调用
                   ids.push(childId);
                   //zTreeObj.removeNode(childrenNodes[j]);
               }
           }
        }

        //去重复的值
        function unique(arr) {
            var result = [], hash = {};
            for (var i = 0, elem; (elem = arr[i]) != null; i++) {
                if (!hash[elem]) {
                    result.push(elem);
                    hash[elem] = true;
                }
            }
            return result;
        }


        /*
           修改节点
        */
        function editNodes(){
           //var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
           var nodes = zTreeObj.getSelectedNodes();
           zTreeObj.editName(nodes[0]);
        }

   </SCRIPT>
</HEAD>

<BODY>

   <div class="zTreeDemoBackground left">
       <ul id="treeDemo" class="ztree"></ul>
       <input type="button" value="增加节点" οnclick="addNodes()"/>
       <input type="button" value="删除节点" οnclick="removeNodes()"/>
       <input type="button" value="修改节点" οnclick="editNodes()"/>
   </div>

</BODY>
</HTML>

后台：

package com.nianlun.springmvc02.student.action;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.nianlun.springmvc02.student.pojo.City;
import com.sun.corba.se.impl.oa.poa.ActiveObjectMap.Key;

import net.sf.json.JSON;
import net.sf.json.JSONArray;

@Controller
@RequestMapping("/tree")
public class TreeHandleAction {

   int max = 1;

   List<String> arrayList = new ArrayList<String>();

   public TreeHandleAction() {
       this.init();
   }

   // 创建初始化方法，在构造方法中执行
   private void init() {

       //             {"id":"2","pId":"1","name":"sd"}
       arrayList.add("{\"id\":\"1\",\"pId\":\"0\",name:\"设置\"}");

       // arrayList.add("{id:1,pId:0,name:'设置'}");
       // arrayList.add("{id:12,pId:1,name:'常规'}");
       // arrayList.add("{id:121,pId:12,name:'路径'}");
       // arrayList.add("{id:122,pId:12,name:'保存'}");
       // arrayList.add("{id:13,pId:1,name:'界面'}");
       // arrayList.add("{id:14,pId:1,name:'提示'}");
       // arrayList.add("{id:15,pId:1,name:'打印'}");

   }
   // produces:指定返回的内容类型，仅当request请求头中的(Accept)类型中包含该指定类型才返回.produces="application/json;charset=UTF-8"

   @ResponseBody
   @RequestMapping(value = "/showTreeNodes")
   public String showTreeNodes() {
       // arrayList.clear();
       JSONArray jsonArray = JSONArray.fromObject(arrayList);
       return jsonArray.toString();
   }

   // 增加树节点
   @ResponseBody
   @RequestMapping("/addTreeNode")
   public String addTreeNode(@RequestBody String string) {
       // 接收传递过来的节点数据newNodes string类型
       // 将此节点存储到列表中

       arrayList.add(string);
       JSONArray jsonArray = JSONArray.fromObject(arrayList);
       return jsonArray.toString();
   }

   @ResponseBody
   @RequestMapping("/handleMax")
   public String handleMax() {
       max = max + 1;
       return max + "";
   }


   //删除节点方法一
   @ResponseBody
   @RequestMapping("/deleteTreeNodes")
   //为什么使用list接收前台传递来的数据不行，而使用数组却可以？
   //使用list，接收后list中是LinkedHashMap类型，[{id=2},{id=3}]，会报错LinkedHashMap无法转为City
   //使用数组，[City[id=2],City[id=3]]
   public String deleteTreeNodes(@RequestBody City[] city){
       for (int i = 0; i < city.length; i++) {
           for (int j = 0; j < arrayList.size(); j++) {
               if (city[i].getId().equals(arrayList.get(j).substring(7, 8))){
                   arrayList.remove(j);
                   break;//如果找到匹配的id，则终止当前的for循环，继续外层for循环
               }
           }
       }
       JSONArray jsonArray = JSONArray.fromObject(arrayList);
       return jsonArray.toString();
   }

   //删除节点方法二
   @ResponseBody
   @RequestMapping("/deleteTreeNodesTwo")
   public String deleteTreeNodesTwo(HttpServletRequest request){
       String str = request.getParameter("data");
        String[] ids = str.split("#");
        for (int i = 0; i < ids.length; i++) {
           for(int j=0;j<arrayList.size();j++){// "id":"2"
               String idStr = "\"id\":\""+ids[i]+"\"";
               if (arrayList.get(j).contains(idStr)) {
                   arrayList.remove(j);
                   break;
               }
           }
       }
        JSONArray jsonArray = JSONArray.fromObject(arrayList);
        return jsonArray.toString();
   }



}