Ztree之简单实现（一）

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标签：

href="<%=request.getContextPath()%>/zTree/css/zTreeS

tyle/zTreeStyle.css" type="text/css">

js:引入js文件需要首先加载 jquery-1.4.2.js

或其他更高版本的 jQuery，这里直接使用官网下载好的JS。 <script type="text/javascript"

src="<%=request.getContextPath()%>/zTree/js/jquery-

1.4.4.min.js"></script>

ztree核心文件：

src="<%=request.getContextPath()%>/zTree/js/jquery.z

tree.core-3.5.js"></script>

5、<body>标签中：

<body>

</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页面首要要引入相关文件

src="<%=request.getContextPath()%>/zTree/js/jquery-

1.4.4.min.js"></script>

href="<%=request.getContextPath()%>/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">

src="<%=request.getContextPath()%>/zTree/js/jquery.ztree.core-

3.5.js"></script>

2、jsp页面body写法

<body>

</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之简单实现（一）

猜你喜欢