java zTree异步加载实战
zTree简介
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
<%@ 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异步加载实战的更多相关文章
- ztree异步加载
Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: ...
- jquery zTree异步加载的例子
下面是使用zTree异步加载的一个例子: 1)初始化树的时候是ajax请求,返回nodes列表来初始化树的:如果一开始就异步的话,$.fn.zTree.init($("#zTree" ...
- zTree 异步加载
zTree异步加载数据的简单实现,更为详细的Api请参考 zTree官网 http://www.treejs.cn/ <link href="~/Content/ztree/css ...
- JQuery ztree 异步加载实践
本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...
- 插件使用一树形插件---zTree一zTree异步加载
zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...
- ztree异步加载树节点
参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...
- ztree异步加载---------补发周日内容
上周六老师要求和大三的进行JAVA知识交流,总体来说就是给大三学长做的东西打分,然后大三学长再教我们如果构建ztree.毕竟第一次接触ztree,所以有很多不了解,但通过周六日努力,还是做出来了.现在 ...
- Ztree异步加载自动展开节点
在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况 ...
- 关于ztree异步加载的问题（二）
本来以为这个异步加载会很难控制,因为考虑到ztree节点图标的控制,结果并不是那么困难,ztree自己控制图标,你只要在json中设置isParent:true,它自己会识别父节点并控制图标,以下是核 ...
- zTree异步加载并初始化树时全部展开（贴主要代码）
<%@page pageEncoding="UTF-8"%> <%@include file="/commons/include/html_doctyp ...
随机推荐
- [转帖]新版 Elasticsearch 中的强悍插件 X-pack
https://zhuanlan.zhihu.com/p/36337697 3 人赞同了该文章 作者:Alan 岂安科技运维工程师努力踏上一条为后人留坑的运维之路.(逃 1 前言 Elk 日志可视 ...
- [转帖]Kafka高可用 — KRaft集群搭建
Apache Kafka Raft 是一种共识协议,它的引入是为了消除 Kafka 对 ZooKeeper 的元数据管理的依赖,被社区称之为 Kafka Raft metadata mode,简称 K ...
- [转帖]docker build 中的 -f 选项
https://www.jianshu.com/p/06c35fd299b7 需要注意的是,在 docker build 命令接收的参数中,提供给 docker build 命令的 -f 选项应该 D ...
- 六个节点三主三从Redis集群最简单搭建方法
背景 一个服务器上面的三主三从的界面太low,容易出问题. 为了验证高可用, 我这边使用六台机器进行了三主三从的搭建. 模仿开源版的一键搭建集群的脚本进行使用,感觉非常简单,这里简单进行一下总结. 环 ...
- 从零开始配置 vim(14)——目录管理插件
我们在介绍vim目录管理的时候提到 vim自带一个 叫做 netrw的工具来管理目录.但是它自身的功能有限,而且样式也丑.今天我们将使用其他强大的插件来替代 netrw,增强目录管理功能 nvim-t ...
- .net5发布到Linux指南
目录 Aspnetcore api 服务发布指南 一. 搭建nginx服务器 下载安装gcc编译库 下载安装pcre正则表达式库 下载安装openssl安全加密库 下载安装zlib解压库 下载解压并编 ...
- python处理Excel实现自动化办公教学（数据筛选、公式操作、单元格拆分合并、冻结窗口、图表绘制等）【三】
相关文章: python处理Excel实现自动化办公教学(含实战)[一] python处理Excel实现自动化办公教学(含实战)[二] python处理Excel实现自动化办公教学(数据筛选.公式操作 ...
- C/C++ 反汇编：分析类的实现原理
反汇编即把目标二进制机器码转为汇编代码的过程,该技术常用于软件破解.外挂技术.病毒分析.逆向工程.软件汉化等领域,学习和理解反汇编对软件调试.系统漏洞挖掘.内核原理及理解高级语言代码都有相当大的帮助, ...
- Flask 框架：运用Ajax实现数据交互
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串 前 ...
- DAPR-分布式系统运行时简介
Dapr全称Distributed Application Runtime,翻译过来就是分布式应用程序运行时,在v1.0发布后得到了极大的发展.本章将向你介绍Dapr架构的核心概念,为您使用Dapr进 ...