Ztree之简单实现(一)
2015-09-12 14:13
337 查看
zTree
下面呢,是我在学习中总结的一些笔记希望对初学者有帮助...
一、什么是zTree?
zTree 是一个依靠 jQuery 实现的多功能
“树插件”,是开源免费的软件。
树形结构的体现:如果是层次嵌套的数据格式则可以认为是树
形结构。如:组织结构,省市县,连锁店,家谱等等。
二、zTree优点
优异的性能、灵活的配置、多种功能的组合是 zTree
最大优点。专门适合项目开发,尤其是树状菜单、树状数据的Web
显示、权限管理等等。
1、支持 JSON 数据
2、支持静态和 Ajax 异步加载节点数据
3、支持极其灵活的 checkbox 或 radio 选择功能
4、灵活的编辑(增/删/改/查)功能,可随意拖拽节点
三、在项目中如何使用
A、静态生成zTree
1、通过官网下载ZIP包,官网地址:http://www.ztree.me这个包
中带有API注释详解和demo,供大家自学使用。
2、新建一个动态项目
3、将我们下好的ZIP包解压,其中的css文件夹和js文件夹统
一放到web目录下(不能放入WEB-INF中)
4、引入js和css,保证ztree能正常使用的基本条件
css:引入css文件要使用link标签:
<link rel="stylesheet"
href="<%=request.getContextPath()%>/zTree/css/zTreeS
tyle/zTreeStyle.css" type="text/css">
js:引入js文件需要首先加载 jquery-1.4.2.js
或其他更高版本的 jQuery,这里直接使用官网下载好的JS。 <
4000
;script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery-
1.4.4.min.js"></script>
ztree核心文件:
<script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery.z
tree.core-3.5.js"></script>
5、<body>标签中:
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
6、js和css引入完毕后,写js,ztree的初始化代码
node中的json数据要注意id和pId之间的对应关系,谁是谁的
父级,谁是谁的子级。并且node里面的数据是以json对象的形式存
储的。
json格式复习:
json对象:就是在{}中存储键值对,键和值之间用冒号分隔,
键值对之间用逗号分隔.
通过.或者[]来访问指定的属性,如果key里面有特殊字符则需
要将key用双引号括起来。
json(JavaScript Object Notation)
json也具有跨平台,跨语言的特性,用来充当数据传输的载体
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
此为zTree 初始化方法,创建 zTree
必须使用此方法,否则就无法创建zTree
Function(obj, zSetting, zNodes)
obj : $("#treeDemo")也就是jQuery Ob-
ject,用于展现zTree的DOM容器
setting : 里面是JSON类型的数据,zTree
的配置数据,具体请参考 “setting
配置详解”中的各个属性详细说明
zNodes : Ar-
ray(json)/json,就是JSON数组,就是我们自己写的各种数据
注意事项:
1、<ul id="treeDemo"
class="ztree"></ul>中id和class是必不可少的,值可以自己随便写
,但是要与后面用到的地方与之对应。
2、setting中idKey和pIdKey的值可以随便写,但是后面要与之对
应,如果idkey的值为"id",pIdKey的值为"pId",那么可以不写。
3、zNodes里的数据自己随便写,但是对应关系要正确。
4、初始化方法必须写,里面的参数不能少。
B、根据数据库信息动态生成zTree
思路:当客户端发送请求到action中,action访问service,s
ervice访问dao,之后返回List,将List转换成json字符串(http
请求接收的是字符串),然后再将json字符串返回给前台jsp页面
中的zNodes这一变量。
方法步骤:
1、搭建SSH框架,建立好包的层次结构,如图:
2、数据库信息
3、Dao层实现类的查询方法,如图:
4、Action层将查询的信息拼接成json格式的字符串返回,如
图:
5、前台jsp页面
首先引入需要的js文件、zTree的核心jar包和zTree的css文件
,如图:
body中的代码:
js中的代码:
注意事项:
1、setting中idKey和pIdKey的值可以随便写,但是后面要与之对
应,如果idkey的值为"id",pIdKey的值为"pId",那么可以不写。
2、zNodes获取后台的数据用正则表达式。
3、在Action层进行字符串拼接的时候,一定要按照zTree树节点的
格式进行字符串的拼接,即id,pId,name一个都不能少,否则即使
为json格式的数据,树形结构也无法生成。
4、Action层字符串拼接结束后,声明一个json,前台接收的就是
我们拼接好的json。
C、根据数据库信息生成ajax的zTree
1、前台jsp页面首要要引入相关文件
<script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery-
1.4.4.min.js"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery.ztree.core-
3.5.js"></script>
2、jsp页面body写法
<body>
<div id="treeClass" class="ztree"></div>
</body>
3、jsp页面<script>写法
4、(前台完成后搞定后台,导入json的jar包)先在model实
体类里声明相关属性,并生成get,set方法
5、通过action访问service,service访问dao,将以pid为条
件查询出菜单列表放入list中,然后再查出所有菜单列表放入另一
个list中,遍历list,通过两者的id与pid比较是否相等,得到某
一节点为父节点,然后将isParent
设置为true,最后将list通过JSONARRAY.fromObject方法转换成js
on数组发送给页面。
Action层:
Dao层:
struts:
6、数据库信息:
最后启动服务,这里注意要直接访问jsp页面,而不是发送请求。
注意事项:
1、使用异步加载,必须设置 setting.async 各个属性。
type属性的值要设置为post,get也能出效果,但是不安全,
所以还是用post请求吧。
异步加载时需要自动提交父节点属性的参数autoParam :
[],中括号里面的值命名一定要规范,不然会陷入死循环。
url的值为我们向后台发送的请求。 2、setting中data可以不写
3、如果需要异步加载根节点,zNodes可以设置为 null 或 [ ]
4、引入json的jar包
5、这里要在Model实体类声明一个属性叫做private String
isParent;是为了在Action层中判断是否为父节点所用。
6、Action层判断是否为父节点的条件menusByid.getMenuPid() ==
menus.getId();
7、将list通过JSONARRAY.fromObject方法转换成json数组发送给
页面
8、Dao层hql语句的书写,注意查询条件。
下面呢,是我在学习中总结的一些笔记希望对初学者有帮助...
一、什么是zTree?
zTree 是一个依靠 jQuery 实现的多功能
“树插件”,是开源免费的软件。
树形结构的体现:如果是层次嵌套的数据格式则可以认为是树
形结构。如:组织结构,省市县,连锁店,家谱等等。
二、zTree优点
优异的性能、灵活的配置、多种功能的组合是 zTree
最大优点。专门适合项目开发,尤其是树状菜单、树状数据的Web
显示、权限管理等等。
1、支持 JSON 数据
2、支持静态和 Ajax 异步加载节点数据
3、支持极其灵活的 checkbox 或 radio 选择功能
4、灵活的编辑(增/删/改/查)功能,可随意拖拽节点
三、在项目中如何使用
A、静态生成zTree
1、通过官网下载ZIP包,官网地址:http://www.ztree.me这个包
中带有API注释详解和demo,供大家自学使用。
2、新建一个动态项目
3、将我们下好的ZIP包解压,其中的css文件夹和js文件夹统
一放到web目录下(不能放入WEB-INF中)
4、引入js和css,保证ztree能正常使用的基本条件
css:引入css文件要使用link标签:
<link rel="stylesheet"
href="<%=request.getContextPath()%>/zTree/css/zTreeS
tyle/zTreeStyle.css" type="text/css">
js:引入js文件需要首先加载 jquery-1.4.2.js
或其他更高版本的 jQuery,这里直接使用官网下载好的JS。 <
4000
;script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery-
1.4.4.min.js"></script>
ztree核心文件:
<script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery.z
tree.core-3.5.js"></script>
5、<body>标签中:
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
6、js和css引入完毕后,写js,ztree的初始化代码
node中的json数据要注意id和pId之间的对应关系,谁是谁的
父级,谁是谁的子级。并且node里面的数据是以json对象的形式存
储的。
json格式复习:
json对象:就是在{}中存储键值对,键和值之间用冒号分隔,
键值对之间用逗号分隔.
通过.或者[]来访问指定的属性,如果key里面有特殊字符则需
要将key用双引号括起来。
json(JavaScript Object Notation)
json也具有跨平台,跨语言的特性,用来充当数据传输的载体
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
此为zTree 初始化方法,创建 zTree
必须使用此方法,否则就无法创建zTree
Function(obj, zSetting, zNodes)
obj : $("#treeDemo")也就是jQuery Ob-
ject,用于展现zTree的DOM容器
setting : 里面是JSON类型的数据,zTree
的配置数据,具体请参考 “setting
配置详解”中的各个属性详细说明
zNodes : Ar-
ray(json)/json,就是JSON数组,就是我们自己写的各种数据
注意事项:
1、<ul id="treeDemo"
class="ztree"></ul>中id和class是必不可少的,值可以自己随便写
,但是要与后面用到的地方与之对应。
2、setting中idKey和pIdKey的值可以随便写,但是后面要与之对
应,如果idkey的值为"id",pIdKey的值为"pId",那么可以不写。
3、zNodes里的数据自己随便写,但是对应关系要正确。
4、初始化方法必须写,里面的参数不能少。
B、根据数据库信息动态生成zTree
思路:当客户端发送请求到action中,action访问service,s
ervice访问dao,之后返回List,将List转换成json字符串(http
请求接收的是字符串),然后再将json字符串返回给前台jsp页面
中的zNodes这一变量。
方法步骤:
1、搭建SSH框架,建立好包的层次结构,如图:
2、数据库信息
3、Dao层实现类的查询方法,如图:
4、Action层将查询的信息拼接成json格式的字符串返回,如
图:
5、前台jsp页面
首先引入需要的js文件、zTree的核心jar包和zTree的css文件
,如图:
body中的代码:
js中的代码:
注意事项:
1、setting中idKey和pIdKey的值可以随便写,但是后面要与之对
应,如果idkey的值为"id",pIdKey的值为"pId",那么可以不写。
2、zNodes获取后台的数据用正则表达式。
3、在Action层进行字符串拼接的时候,一定要按照zTree树节点的
格式进行字符串的拼接,即id,pId,name一个都不能少,否则即使
为json格式的数据,树形结构也无法生成。
4、Action层字符串拼接结束后,声明一个json,前台接收的就是
我们拼接好的json。
C、根据数据库信息生成ajax的zTree
1、前台jsp页面首要要引入相关文件
<script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery-
1.4.4.min.js"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/zTree/js/jquery.ztree.core-
3.5.js"></script>
2、jsp页面body写法
<body>
<div id="treeClass" class="ztree"></div>
</body>
3、jsp页面<script>写法
4、(前台完成后搞定后台,导入json的jar包)先在model实
体类里声明相关属性,并生成get,set方法
5、通过action访问service,service访问dao,将以pid为条
件查询出菜单列表放入list中,然后再查出所有菜单列表放入另一
个list中,遍历list,通过两者的id与pid比较是否相等,得到某
一节点为父节点,然后将isParent
设置为true,最后将list通过JSONARRAY.fromObject方法转换成js
on数组发送给页面。
Action层:
Dao层:
struts:
6、数据库信息:
最后启动服务,这里注意要直接访问jsp页面,而不是发送请求。
注意事项:
1、使用异步加载,必须设置 setting.async 各个属性。
type属性的值要设置为post,get也能出效果,但是不安全,
所以还是用post请求吧。
异步加载时需要自动提交父节点属性的参数autoParam :
[],中括号里面的值命名一定要规范,不然会陷入死循环。
url的值为我们向后台发送的请求。 2、setting中data可以不写
3、如果需要异步加载根节点,zNodes可以设置为 null 或 [ ]
4、引入json的jar包
5、这里要在Model实体类声明一个属性叫做private String
isParent;是为了在Action层中判断是否为父节点所用。
6、Action层判断是否为父节点的条件menusByid.getMenuPid() ==
menus.getId();
7、将list通过JSONARRAY.fromObject方法转换成json数组发送给
页面
8、Dao层hql语句的书写,注意查询条件。
相关文章推荐
- ZOJ Fiddlesticks (简单模拟)
- Angular绑定数据时转义html标签
- 秋天是养胃好时机
- LeetCode_remove-duplicates-from-sorted-array
- servlet生命周期
- Android搭建简单的主体界面框架-SlidingPaneLayout
- IOS UILabel 设置圆角
- MySQL学习总结
- 聊聊本地前端数据的持久化解决方案
- 二叉树
- 转:Qt项目中遇到的一些小问题汇总
- 关于《JavaScript DOM 编程艺术》一书中getHTTPObject.js 的一点看法
- ActiveX控件实现安全的初始化和脚本
- yii2.0数据库迁移 [多个数据库同时同步数据]
- Win7电脑的操作中心打不开怎么办?Win7电脑的操作中心打不开的解决方法
- 输入五个数字,进行冒泡排序
- 获取iPhone通话记录(需越狱)
- 在数据库中删除Sharepoint Splistitem 数据
- Gibbs Sampling(三):补充
- 基于android 社会的app短信分享 发送回调事件的实现