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. [转帖]decimal,float和double的区别是什么?

    https://zhuanlan.zhihu.com/p/352503879 今天复习mysql理论知识,在看常用数据类型的时候发现float和decimal类型都是表示小数,就展开搜索学习了一下区别 ...

  2. [转帖] 如何kill一条TCP连接?

    https://www.cnblogs.com/codelogs/p/16838850.html 原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介# 如果你的程序写 ...

  3. [转帖]模拟enq: TX - row lock contention争用

    https://www.modb.pro/db/623036 enq: TX - row lock contention它表示一个事务正在等待另一个事务释放被锁定的行.这种等待事件通常发生在并发访问数 ...

  4. jconsole的简单学习

    摘要 jconsole 是JDK自带的一款图形化监测工具 他可以监测本地程序,也可以检测远程的机器 在没有其他监控手段可以使用的情况下可以快速进行必要的监测 使用方法也比较简单. 本地监控 jcons ...

  5. 【如何提高IT运维效率】深度解读京东云基于NLP的运维日志异常检测AIOps落地实践

    作者:京东科技  张宪波.张静.李东江 基于NLP技术对运维日志聚类,从日志角度快速发现线上业务问题 日志在IT行业中被广泛使用,日志的异常检测对于识别系统的运行状态至关重要.解决这一问题的传统方法需 ...

  6. Python控制微信,实现聊天机器人

    自从微信禁止网页版登陆之后,itchat 库实现的功能也就都不能用了,那现在 Python 还能操作微信吗?答案是:可以! 在Github上有一个项目叫<WeChatPYAPI>可以使用 ...

  7. VUe2.0 和 Vue3.0 的生命周期作对比

    VUe2.0 和 Vue3.0 的生命周期作对比 beforeCreate -> 请使用 setup() created -> 请使用 setup() beforeMount -> ...

  8. 图片三像素问题如何解决css

    一.提出问题 在浏览器中,图片有一个下间隙问题,有人也称之为图片3像素BUG 1.这并不是什么浏览器bug,而只是英文字母书写时有个基线的问题,基线决定了图片的对其方式.这才是造成浏览器中图片下间隙的 ...

  9. 从零构建医疗领域知识图谱的KBQA问答系统:其中7类实体,约3.7万实体,21万实体关系。

    从零构建医疗领域知识图谱的KBQA问答系统:其中7类实体,约3.7万实体,21万实体关系. 项目效果 以下两张图是系统实际运行效果: 1.项目运行方式 运行环境:Python3 数据库:neo4j 预 ...

  10. 关于飞桨UIE等模型预测推理时间很久的问题分析以及解决,蒸馏剪枝部署问题解决

    1.关于飞桨UIE等模型预测推理时间很久的问题分析以及解决 1.1.原因分析 用uie做实体识别,Taskflow预测的时间与schema内的实体类别数量成正比,schema里面有多少个实体类别 实体 ...