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

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>

运行结果：

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

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

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

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