参考博客：https://www.cnblogs.com/henuyuxiang/p/6677397.html
前台代码
<%@ 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>
<div class="container">
<h4>Ztree异步加载使用例子</h4>
<input type="text" id="search" /> <input type="button" id="btn" value="搜素" onclick="search()"/>
<ul id="zTree" class="ztree"></ul>
</div>
</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" src="resources/js/jquery.ztree.exhide.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
},
callback: {
onNodeCreated: zTreeOnNodeCreated
}
};
$(document).ready(function(){
initZTree();
});
/**
* 搜索
*/
function search(){
var param = $.trim($("#search").val());
var treeObj = $.fn.zTree.getZTreeObj("zTree");
if(param != ""){
param = encodeURI(encodeURI(param));
treeObj.setting.async.otherParam=["param", param];
}else {
//搜索参数为空时必须将参数数组设为空
treeObj.setting.async.otherParam=[];
}
treeObj.reAsyncChildNodes(null, "refresh");
}
function zTreeOnNodeCreated(event, treeId, treeNode){
var param = $.trim($("#search").val());
var treeObj = $.fn.zTree.getZTreeObj(treeId);
if(param!="" && treeNode.isParent){
treeObj.reAsyncChildNodes(treeNode, "refresh",false);
}
}
function filter(treeId, parentNode, childNodes) {
return childNodes;
}
//初始化树
function initZTree(){
$.ajax({
url:"asyncGetNodes",
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; } }
后台代码：
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("/asyncGetNodes") @ResponseBody public List<Node> asyncGetNodes(String id, String pid, String name) throws Exception{ List<Node> nodeList = new ArrayList<Node>(); if(id==null){ nodeList.add(new Node("1","0","硬件规格","false","true")); nodeList.add(new Node("2","0","软件规格","false","true")); return nodeList; } if(id.equals("1")){ nodeList.add(new Node("10","1","单板","false","true")); nodeList.add(new Node("11","1","子卡","false","true")); nodeList.add(new Node("12","1","设备","false","true")); }else if(id.equals("2")){ 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")); }else if(id.equals("10")){ nodeList.add(new Node("100",id,"单板_00","false","true")); nodeList.add(new Node("101",id,"单板_00","false","false")); }else if(id.equals("100")){ nodeList.add(new Node("1000",id,"单板_00_00","false","false")); } Thread.sleep(1000); return nodeList; } }
说明：
1.通过在otherParam数组中设值的方式将搜索参数带到后台（无参数时必须将otherParam设为空数组否则一直会将前一次的参数带到后台）；
2.在结点创建完成后的回调函数onNodeCreated中进行手动异步加载。每个节点都进行异步加载，这时候带上搜索的关键字进行查询，达到搜索目的；
3.我这边第一次因为要将第一个父节点展开，所以第一次请求第一级父级节点，然后手动$.fn.zTree.init($("#zTree"),setting, data)，这时候expandNode第一个父级节点，是自动异步加载的；
4.如果点击搜索，自动带上param参数，这个参数就是搜索的关键字，然后每个节点创建时候触发onNodeCreated事件，每个节点只要是父节点，都会进行异步加载；
5.我这边后台没有写根据param进行查询，仅仅是一个例子而已。真正根据param去查询就行了。
初始化的时候默认加载第一个父级节点：
搜索的时候加载全部节点，要包含节点名字:
