异步加载:是指在数据量大的情况下,默认只加载根节点,当点击这个节点的时候才去加载这个节点下的子节点,不会一下子全部加载出数据,提高了查询数据的效率。
1.先引入ztree插件到静态文件目录下,包含js和css
2.建一个节点的实体类
public class TreeNode {
private String id;
private String pId;
private String name;
private Boolean isParent;
private Boolean hasChild;
private String level;
public String getLevel() {
return level;
}
public void setLevel(String level) {
this.level = level;
}
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 Boolean getIsParent() {
return isParent;
}
public void setIsParent(Boolean isParent) {
this.isParent = isParent;
}
public Boolean getHasChild() {
return hasChild;
}
public void setHasChild(Boolean hasChild) {
this.hasChild = hasChild;
}
public TreeNode(String id, String pId,
String name,
Boolean isParent,
Boolean hasChild,String level) {
super();
this.id = id;
this.pId = pId;
this.name = name;
this.isParent = isParent;
this.hasChild = hasChild;
this.level=level;
}
}
3.相关jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath %>/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=basePath %>/static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/static/js/jquery.ztree.core-3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
initMyZtree();
});
var zNodes="";
var setting = {
view: {
selectedMulti: false,
fontCss: setFontCss
},
async: {
enable: true,
url:"getZtree.do",
autoParam:["id"]
},
callback: {
beforeClick: beforeClickZtree
}
};
function initMyZtree(){
$.ajax({
type: "POST",
dataType: "json",
url: 'getZtree.do',
success: function(data) {
zNodes=data;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
});
}
//单击事件
function beforeClickZtree(treeId, treeNode){
alert(treeNode.id+","+treeNode.name);
}
//设置字体 颜色
function setFontCss(treeId, treeNode) {
if(treeNode.level==0){
return {'font-weight':'bold','color':'red'};
}else if(treeNode.level==1){
return {'font-weight':'bold','color':'green'};
}else if(treeNode.level==2){
return {'font-weight':'bold','color':'blue'};
}else{
return {};
}
};
</script>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>
4.controller处理:
数据是自己做的,没有查数据库
/**
* ztree
* @return
* @throws Exception
*/
@RequestMapping(value="getZtree.do")
@ResponseBody
public String LoadTree(HttpServletResponse response,HttpServletRequest request) throws Exception
{
String id=request.getParameter("id");
System.out.println("*********"+id+"**********");
if("null".equals(id)||"".equals(id)||id==null){
id="0";
}
List<TreeNode> list=new ArrayList<TreeNode>(); //所有
list.add(new TreeNode("CPIC","0","A",true,true,"0"));
list.add(new TreeNode("C01","CPIC","B",true,true,"1"));
list.add(new TreeNode("C02","CPIC","C",true,true,"1"));
list.add(new TreeNode("C001","C01","D",true,false,"2"));
list.add(new TreeNode("C002","C02","E",true,false,"2"));
List<TreeNode> relist=new ArrayList<TreeNode>(); //需要的
JSONArray jarray=new JSONArray();
try {
for (TreeNode t : list) {
if(t.getpId().equals(id)){
relist.add(t);
}
}
} catch (Exception e) {
e.printStackTrace();
}
jarray.addAll(relist);
System.out.println(jarray.toString());
response.setCharacterEncoding("utf-8");
PrintWriter pw = null;
try {
pw = response.getWriter();
pw.write(jarray.toString());
} catch (IOException e) {
e.printStackTrace();
}
pw.flush();
pw.close();
return null;
}
大功告成,是不是很简单
下面附源码:https://download.csdn.net/download/yufeng005/10283997