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>

6 页面展示



java zTree异步加载实战的更多相关文章

  1. ztree异步加载

    Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...

  2. jquery zTree异步加载的例子

    下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...

  3. zTree 异步加载

    zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网   http://www.treejs.cn/ <link href="~/Content/ztree/css ...

  4. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  5. 插件使用一树形插件---zTree一zTree异步加载

    zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...

  6. ztree异步加载树节点

    参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...

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

    上周六老师要求和大三的进行JAVA知识交流,总体来说就是给大三学长做的东西打分,然后大三学长再教我们如果构建ztree.毕竟第一次接触ztree,所以有很多不了解,但通过周六日努力,还是做出来了.现在 ...

  8. Ztree异步加载自动展开节点

    在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...

  9. 关于ztree异步加载的问题（二）

    本来以为这个异步加载会很难控制,因为考虑到ztree节点图标的控制,结果并不是那么困难,ztree自己控制图标,你只要在json中设置isParent:true,它自己会识别父节点并控制图标,以下是核 ...

  10. zTree异步加载并初始化树时全部展开（贴主要代码）

    <%@page pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctyp ...

随机推荐

  1. Go-竞态条件-锁

    1. 产生环境 多个进程(process).线程(threading)或协程(routine)存在对同一个资源访问顺序敏感(时间上的错误) 2. 概念 临界区 -- 时间上对同一资源的读写产生的数据不 ...

  2. [转帖]CPU写入512bit要多久：从AVX到NEON

    https://zhuanlan.zhihu.com/p/677124882 写这篇文章的原因是有个项目需要降低延迟,希望能更快地把512bit的数据从内存搬进PCIe设备.原先的做法是软件写寄存器通 ...

  3. [转帖]TiDB 配置参数修改与系统变量修改步骤

    https://tidb.net/blog/bda86911   注意事项1:tidb-test 为集群名称   注意事项2:参数修改前与修改后备份.tiup目录   注意事项3:通过 tiup cl ...

  4. [转帖]ssh时不输入YES

    vim /etc/ssh/ssh_config 60行新添加 StrictHostKeyChecking no

  5. [转帖]内存随机访问也比顺序慢，带你深入理解内存IO过程

    https://zhuanlan.zhihu.com/p/86513504 平时大家都知道内存访问很快,今天来让我们来思考两个问题: 问题1: 内存访问一次延时到底是多少?你是否会进行大概的估算? 例 ...

  6. 使用Docker快速搭建InnoDB Cluster集群的过程

    感谢 感谢方神的大力帮助,自己对数据库基本一窍不通.只是照葫芦画瓢做出来的. 感谢来自如下两个网站的资料,我进行了一定程度的融合. https://blog.csdn.net/weixin_43972 ...

  7. Mark 一下 Redisson 可能需要升级版本

    貌似有bug 我们高并发的情况下貌似遇到了 https://github.com/redisson/redisson/issues/2299

  8. 你不知道的Linux shell操作

    Linux Shell 脚本入门教程 Linux Shell 脚本是一种强大的工具,它允许您自动化日常任务和复杂操作.在本教程中,我们将逐步介绍几个实用的 Shell 脚本示例.每个示例都将详细说明, ...

  9. Gin-官方文档

    目录 官方文档 官方文档 https://learnku.com/docs/gin-gonic/2018/gin-readme/3819 https://www.kancloud.cn/shuangd ...

  10. 紫 distance

    仅此纪念我爆掉的T3 紫,即RE,运行出错,梦幻,而又不失杀气 根据<雪distance>改编,分为提交前,评测前,评测时,评测后 你说我考试AK,可我却运行出错 任凭无尽的懊悔将我淹没, ...