java zTree异步加载实战

最新推荐文章于 2024-02-23 18:20:45 发布

罗汉爷

最新推荐文章于 2024-02-23 18:20:45 发布

阅读量1.1w

点赞数 3

分类专栏： Java-Web 文章标签： ztree 异步加载

本文链接：https://blog.csdn.net/indexman/article/details/78573782

版权

Java-Web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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>