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>

运行结果：

 当点击叶子节点时，跳转页面： 

 当点击父节点时，跳转页面： 

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

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