上周六老师要求和大三的进行JAVA知识交流，总体来说就是给大三学长做的东西打分，然后大三学长再教我们如果构建ztree。
毕竟第一次接触ztree，所以有很多不了解，但通过周六日努力，还是做出来了。
现在来补发。
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。
优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
想要了解更多可到ztree网站 http://www.treejs.cn/v3/main.php#_zTreeInfo，今天只说一下异步加载。
ztree需要引入三个包
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/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>
你可以去官网下载，然后引入，（！！！记得修改路径）
用异步加载必须设置setting.async 中的各个属性，因为我们要联系数据库，所以得有一个Servlet层,当然还需要一个树的对象，连接数据库的DBUtil层，以及对数据库进行 *** 作的Dao层
思路：通过id和pid将父节点和子节点联系起来，父id是子的pid，所以，可以通过父id，来查询所以的pid是否等于id来进行查找他的子，所以数据库就可以设置成id name pid。
首先通过页面向Servlet传来id（第一次传来的id是空，因为第一个没有父亲，所以传来的是空，但是我们得将他转换为0），然后通过父id来查找子节点。
关键一步，因为子节点也可能是父节点，所以需要判断它是否为父亲节点，如果不是则isParent为false，（isParent在数对象里我把它默认成true）；具体看代码
对象层
package Bin;
public class Tree {
private int id;
private String name;
private int pid; // 父id
private boolean IsParent = true; // 是否为父节点
private String url; //跳转路径
private String target; //设置点击节点后在何处打开 url
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public boolean getIsParent() {
return IsParent;
}
public void setIsParent(boolean isParent) {
IsParent = isParent;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getTarget() {
return target;
}
public void setTarget(String target) {
this.target = target;
}
}
Dao层
package Dao; import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List; import org.junit.Test; import Bin.Tree;
import Bin.Volunteer;
import DBUtil.Util;
public class Dao {
/*
* 查询
*/
@Test
public static List<Tree> query(int pid){
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Tree> list = new ArrayList<>();;
try {
// 获取连接
con = Util.getConnection();
// 编写sql语句
String sql = "select * from City where pid = ?";
// 执行sql语句
ps = con.prepareStatement(sql);
// 设置参数
ps.setInt(1, pid);
// 执行查询 *** 作
rs = ps.executeQuery();
while(rs.next()) {
Tree city = new Tree();
city.setId(rs.getInt(1));
city.setName(rs.getString(2));
city.setPid(rs.getInt(3));
list.add(city);
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
if(rs!=null) {
rs.close();
}
Util.release(con, ps);
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
// 查询某个节点是否有子节点
public static int search(int id){
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
int n = 0;
try {
// 获取连接
con = Util.getConnection();
// 编写sql语句
String sql = "select * from City where pid = ?";
// 执行sql语句
ps = con.prepareStatement(sql);
//设置参数
ps.setInt(1, id);
// 执行查询 *** 作
rs = ps.executeQuery();
while(rs.next()) {
n++;
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
if(rs!=null) {
rs.close();
}
Util.release(con, ps);
} catch (SQLException e) {
e.printStackTrace();
}
return n;
}
}
DBUtil层：连接数据库和释放资源
package DBUtil; import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException; public class Util {
// 获取连接
// 获取连接方法
public static Connection getConnection() {
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/tree?useSSL=false&useUnicode=true&characterEncoding=utf8";
String username = "root";
String password = "a3685371";
Connection con = null;
try {
Class.forName(driver);
con = DriverManager.getConnection(url,username,password);
}catch(Exception e) {
throw new RuntimeException(e);
}
return con;
}
// 释放资源 public static void release(Connection con,PreparedStatement ps) {
if(ps!=null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(con!=null) {
try {
con.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
} }
Servlet层：
package Servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Bin.Tree;
import Dao.Dao;
import net.sf.json.JSONArray; /**
* Servlet implementation class Servlet
*/
@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
Dao dao = new Dao();
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
String pid = request.getParameter("id");
if(pid==null||pid.equals("")) {
pid = 0+"";
}
List<Tree> list = Dao.query(Integer.parseInt(pid));
for(int i=0;i<list.size();i++) {
Tree tree = list.get(i);
int n = Dao.search(tree.getId());
if(n>=1) {
tree.setIsParent(true);
tree.setUrl("fenzhi.jsp");
tree.setTarget("tree");
}else {
tree.setIsParent(false);
tree.setUrl("yezi.jsp");
tree.setTarget("tree");
}
}
// 将list对象转换为json
JSONArray json = JSONArray.fromObject(list);
// 将json对象转换为字符串
String JSON = json.toString();
// 将JSON相应给客户端
PrintWriter pt = response.getWriter();
pt.println(JSON);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
页面：
<%@ 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> <TITLE> ZTREE DEMO - Standard Data </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/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" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<script type="text/javascript">
var setting = {
async: {
enable: true, // 设置Ztree是否开启异步加载模式
url: "Servlet", // 请求路径
autoParam:["id"] // 异步加载时需要自动提交父节点属性的参数
}
};
// 自动加载树
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
</HEAD>
<BODY style="background-color:#ff8888">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div> </BODY>
</HTML>
运行结果：
当点击叶子节点时，跳转页面：
当点击父节点时，跳转页面：
总结：树刚开始接触，不是很了解，还需多加练习。
如果有大佬发现错误或者有更简便的方法，请留言，感激不尽！！向您学习！！！！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）