ajax初始化 ztree v3,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)后面点击最末端的节点，比如点击单板的时候，开始异步加载；下面是前端代码,注意加粗部分

**

**

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 ListgetNodes() throws Exception{

ListnodeList = 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 ListasyncGetNodes(String id, String pid, String name) throws Exception{

ListnodeList = 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;

}

}