ztree异步加载---------补发周日内容

ztree异步加载---------补发周日内容,第1张

ztree异步加载---------补发周日内容

    上周六老师要求和大三的进行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>

运行结果:

当点击叶子节点时,跳转页面: 

当点击父节点时,跳转页面: 

总结:树刚开始接触,不是很了解,还需多加练习。


如果有大佬发现错误或者有更简便的方法,请留言,感激不尽!!向您学习!!!!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/586363.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存