下面是使用zTree異步加載的一個例子：
1）初始化樹的時候是ajax請求，返回nodes列表來初始化樹的；如果一開始就異步的話，$.fn.zTree.init($("#zTree"),setting, data)第三個參數為null就行；
2）后面點擊最末端的節點，比如點擊單板的時候，開始異步加載；
我准備的nodes的數據結構：一會返回的node就是這樣的格式，不過全部是string類型；
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 } ]
index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="resources/zTreeStyle/zTreeStyle.css" type="text/css"> <link rel="stylesheet" type="text/css" href="resources/bootstrap/bootstrap.min.css"> <title>index</title> </head> <body> <h4>Ztree異步加載使用例子</h4> <ul id="zTree" class="ztree"></ul> </body> <script src="resources/js/jquery.min.js"></script> <script type="text/javascript" src="resources/js/jquery.ztree.all.min.js"></script> <script type="text/javascript"> var setting = { async: { enable: true, url:"asyncGetNodes", autoParam:["id", "pid", "name"], dataFilter: filter }, data:{ simpleData:{ enable: true, idKey:'id', pIdKey:'pid', rootPId: 0 } }, view:{ showIcon: false } }; $(document).ready(function(){ initZTree(); }); function filter(treeId, parentNode, childNodes) { return childNodes; } //初始化樹 function initZTree(){ $.ajax({ url:"getNodes", type:"post", dataType: "json", success: function(data){ console.log(data); var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data); //讓第一個父節點展開 var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null); zTreeObj.expandNode(rootNode_0, true, false, false, false); }, error: function(){ } }); } </script> </html>
實體Node.java:
package com.test.model; public class Node { private String id; private String pid; private String name; private String open; 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; } }
Controller:
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<Node> getNodes() throws Exception{ List<Node> nodeList = new ArrayList<Node>(); 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<Node> asyncGetNodes(String id, String pid, String name) throws Exception{ List<Node> nodeList = new ArrayList<Node>(); 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; } }
Thread.sleep(3000);是模擬異步加載的時間；
效果：
一開始初始化完tree時候，讓第一個父節點展開了；
異步加載過程中....
異步加載完成：
------------------------------------------------------------------------------------------------------------------------------------------------------------------