jquery zTree初始化及异步加载

下面是使用zTree异步加载的一个例子:

1)初始化树的时候是ajax请求,返回nodes(树的节点)列表来初始化树的;如果一开始就异步的话,$ . f n . z T r e e . i n i t ( .fn.zTree.init( .fn.zTree.init(("#zTree"),setting, data)第三个参数为null就行;

以下面这个Node的例子举个栗子:

var nodes = 
[  {  'id': 1,  'pid': 0, 'name': '硬件规格','open':false },
    { 'id': 10, 'pid': 1, 'name': '单板', 'open':false  },
        //比如点击单板+,要异步加载的两个节点,模拟用
   {  'id': 100,  'pid': 10,  'name': '单板_00', 'open':false  },
  {'id': 101,'pid': 10,'name': '单板_01','open':false},

    {'id': 11, 'pid': 1,   'name': '子卡', 'open':false },
    {  'id': 12,  'pid': 1, 'name': '设备', 'open':false},
    { 'id': 2,'pid': 0, 'name': '软件规格',  'open':false},
    {'id': 20,'pid': 2, 'name': 'java',   'open':false },
     {'id': 21, 'pid': 2, 'name': 'jscript', 'open':false },
    { 'id': 22,  'pid': 2,  'name': 'php','open':false  }
]

实际上这个ztree的node是json数组

2)后面点击最末端的节点,比如点击单板的时候,开始异步加载;下面是前端代码,注意加粗部分

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>




**
**
index


    

Ztree异步加载使用例子

    后端实体类(Node),用于封装一个节点

    package com.test.model;
    
    public class Node {
    	//自己的ID
        private String id;
       // 父节点ID
        private String pid;
        //自己的名字
        private String name;
        //是否展开
        private String open;
        是否是父节点,(true,就是展开)
        private String isParent;
        
        public Node(String id, String pid, String name, String open, String isParent) {
            super();
            this.id = id;
            this.pid = pid;
            this.name = name;
            this.open = open;
            this.isParent = isParent;
        }
        public String getId() {
            return id;
        }
        public void setId(String id) {
            this.id = id;
        }
        public String getPid() {
            return pid;
        }
        public void setPid(String pid) {
            this.pid = pid;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public String getOpen() {
            return open;
        }
        public void setOpen(String open) {
            this.open = open;
        }
        public String getIsParent() {
            return isParent;
        }
        public void setIsParent(String isParent) {
            this.isParent = isParent;
        }
        
        
    }
    

    后端控制器代码

    package com.cy.controller;
    
    import java.util.ArrayList;
    import java.util.List;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.alibaba.fastjson.JSON;
    import com.test.model.Node;
    
    @Controller
    public class ZtreeController {
        
        @RequestMapping("/getNodes")
        @ResponseBody
        public List getNodes() throws Exception{
            List nodeList = new ArrayList();
            nodeList.add(new Node("1","0","硬件规格","false","true"));
            nodeList.add(new Node("10","1","单板","false","true"));
            nodeList.add(new Node("11","1","子卡","false","true"));
            nodeList.add(new Node("12","1","设备","false","true"));
            nodeList.add(new Node("2","0","软件规格","false","true"));
            nodeList.add(new Node("20","2","java","false","true"));
            nodeList.add(new Node("21","2","jscript","false","true"));
            nodeList.add(new Node("22","2","php","false","true"));
            return nodeList;
        }
        
        @RequestMapping("/asyncGetNodes")
        @ResponseBody
        public List asyncGetNodes(String id, String pid, String name) throws Exception{
            List nodeList = new ArrayList();
            if(id.equals("10")){
                nodeList.add(new Node("100",id,"单板_00","false","false"));
                nodeList.add(new Node("101",id,"单板_01","false","false"));
            }
            Thread.sleep(3000);
            return nodeList;
        }
    }
    

    你可能感兴趣的:(jquery,zTree)