ZTree简介

ZTree是什么：

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

为什么使用ZTree控件：

优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

1、运行效率高，采用了延时加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀

2、用户体验高，页面内可同时生成多个 Tree 实例，支持任意更换皮肤 / 自定义图标，支持极其灵活的 checkbox 或 radio 选择功能可以给用户带来较高的用户体验

3、兼容性好，支持各大主流浏览器（ IE、FireFox、Chrome、Safari） 4、配置简单，灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽

5、支持 JSON 数据

6、支持静态和 Ajax 异步加载节点数据

ZTree使用说明

前提条件：

页面要引入

jquery.ztree.all-3.3.js jquery-1.4.4.min.js zTreeStyle.css

导入img文件夹

Java端要引入

Json-lib-2.1.jar 数据库表中字段必须要有三个： id pid name

思路详解

动态显示zTree树形结构

在页面端要引入相关js文件以及css样式文件，java端引入json-lib.jar包，当客户端发送请求到action中，action访问service，service访问dao，之后返回List，将List转换成json数组，再将json数组转换成json字符串（http请求接收的是字符串），然后再将json字符串返回到jsp页面（确切的说是将json字符串返回到jsp页面中zNodes这一变量中）。

页面通过jquery加载方法ready来加载zTree，zTree则通过内部封装好的init方法来加载树，首先要加载显示树的网页元素(一般为div或者ul),其次配置树通过setting配置常用参数，之后加载树节点zNodes，zNodes也是从后台传过来的json字符串，最后动态加载树完成。

通过右键操作，动态对树zTree进行增删改

在页面端要引入相关js文件以及css样式文件，java端引入json-lib.jar包，页面端需要配置右键div对树的操作如：增加、修改、删除节点，div首先要将其隐藏，然后页面进行加载树，通过配置右键节点事件来调用右键方法，右键事件触发后将右键div对树的操作变为显示，通过点击 增加/修改/删 调用其方法，其次通过ajax提交到后台action中，action访问service，service访问dao，然后进行相关的增删改对数据库操作，之后通过ajax的回调函数将 增加/修改/删除的节点进行页面显示，最后对节点相关的动态逻辑操作完成。

异步加载zTree

在页面端要引入相关js文件以及css样式文件，java端引入json-lib.jar包，页面端需要配置异步加载async，并设置其中的参数enable开启异步和url请求地址以及autoParam提交的父节点属性，然后通过url请求action，action访问service，service访问dao，将以pid为条件查询出菜单列表放入list中，然后再查出所有菜单列表放入另一个list中，遍历list，通过两者的id与pid比较是否相等以及根节点的pid为0，得到某一节点为父节点，然后将isParent 设置为true，最后将list通过JSONARRAY.fromObject方法转换成json数组发送给页面，异步加载zTree完成

操作详解

动态显示zTree （从数据库取将内容用zTree显示）

数据库zTree表的详细信息

一.页面端

引入js以及css样式