java zTree异步加载实战
zTree简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。
详细请参考官网：
http://www.treejs.cn/v3/main.php#_zTreeInfo
本文介绍企业中最常用的异步加载技术。
本例展示一个大学的树结构，包括【院校--院系--专业--班级】几个层级。
1 mysql建表
CREATE TABLE school_tree
(
id INT,
pid INT,
NAME VARCHAR(100)
);
INSERT INTO school_tree VALUES(1,NULL,'清华大学');
INSERT INTO school_tree VALUES(2,1,'软件工程学院');
INSERT INTO school_tree VALUES(3,1,'国际贸易学院');
INSERT INTO school_tree VALUES(4,1,'土木工程学院');
INSERT INTO school_tree VALUES(5,1,'机电学院');
INSERT INTO school_tree VALUES(6,2,'软件测试专业');
INSERT INTO school_tree VALUES(7,2,'游戏开发专业');
INSERT INTO school_tree VALUES(8,6,'C001班');
INSERT INTO school_tree VALUES(9,6,'C002班');
INSERT INTO school_tree VALUES(10,3,'对外贸易专业');
INSERT INTO school_tree VALUES(11,10,'D001班');
INSERT INTO school_tree VALUES(12,10,'D002班');
COMMIT;
SELECT * FROM school_tree;2 编写实体类
package entity; /** * 学校树形实体类 * * @author xusucheng * @create 2017-11-18 **/ public class SchoolTree { private int id; private int pId; private String name; private int isParent; public int getId() { return id; } public void setId(int id) { this.id = id; } public int getpId() { return pId; } public void setpId(int pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getIsParent() { return isParent; } public void setIsParent(int isParent) { this.isParent = isParent; } }
3 编写测试类
package test;
import entity.SchoolTree;
import net.sf.json.JSONArray;
import util.DBUtil;
import javax.xml.transform.Result;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
/**
* @author xusucheng
* @create 2017-11-18
**/
public class TestSchoolTree {
public static void main(String[] args) throws SQLException {
JSONArray jsonArray = getSchoolTree(null);
}
public static JSONArray getSchoolTree(String pid) throws SQLException {
List<SchoolTree> list=new ArrayList<>();
//SchoolTree entity=null;
String sql=null;
Connection con= DBUtil.getConnection();
if(pid==null){
sql="select id,pid,name from school_tree where pid is null";
}else {
sql="select id,pid,name from school_tree where pid ="+pid;
}
PreparedStatement ps = con.prepareStatement(sql);
ResultSet rs = ps.executeQuery(sql);
while (rs.next()){
System.out.println(rs.getInt("id")+":"+rs.getInt("pid")+":"+rs.getString("name"));
SchoolTree entity=new SchoolTree();
entity.setId(rs.getInt("id"));
entity.setpId(rs.getInt("pid"));
entity.setName(rs.getString("name"));
entity.setIsParent(1);
list.add(entity);
}
DBUtil.close(rs,ps,con);
JSONArray resultJson = JSONArray.fromObject(list);
return resultJson;
}
}
4 编写获取树结构数据的JSP
为演示方便用了JSP，实战请用servlet或controller
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="test.TestSchoolTree" %>
<%
String pid=request.getParameter("id"); //父节点ID
String jsonStr=TestSchoolTree.getSchoolTree(pid).toString();
out.print(jsonStr);
%>5 编写树html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步加载树</title>
<link rel="stylesheet" href="../../css/zTreeStyle.css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
<script type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: 0
}
},
async: {
enable: true,
url: "getSchoolTree.jsp",
autoParam: ["id"]
},
// 回调函数
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
// 判断是否父节点
if(!treeNode.isParent){
alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
}
}
}
};
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
</head>
<body>
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>6 页面展示
