jqueryzTree原理

JqueryZTree用法原理

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样式

a) 创建显示zTree的页面元素（div或ul） ，并设置元素属性id与class=”ztree”（class=”ztree”为zTree插件封装好的css样式，必须写，不可改）

b) 通过jquery页面加载模式来加载zTree

参数：

1.$(“#treeClass”):用于展现 zTree 的页面元素 2.setting：zTree 的配置数据 3.zNodes：zTree 的节点数据

c) zTee初始化方法参数详解

1. $(“#treeClass”):用于展现 zTree 的页面元素

2. setting：zTree 的配置数据

3.zNodes：zTree 的节点数据

二：java端

引入json-lib.jar包

a)创建实体类，实体类中的属性名称必须要与页面端zTree配置中的name、idKey与pIdKey的参数相匹配

b) 通过请求访问action，action访问service，service访问dao，之后返回List，将List转换成json数组，再将json数组转换成json字符串（http请求接收的是字符串），然后再将json字符串返回到jsp页面，确切的说是将json字符串返回到jsp页面中zNodes这一变量中，最后页面显示的树就是从数据库取得的动态树

三：效果展示

在节点前添加复选框只需要在setting里配置check，并配置enable:true参数即可

带有复选框树的效果展示

动态对zTree的增删改（增删改同时对页面和数据库）

通过zTree右键事件来操作对zTree的增删改 数据库zTree表的详细信息

一：页面端

引入相关的js和css样式

a）添加div treeClass来加载zTree，添加div menu，menu 里有四个文本框为id，pid，name，url，以及添加右键事件div rMenu，rMenu div包含一个ul li列表，ul li列表内容为：添加节点，删除节点，编辑节点,,并设置css样式将其div隐藏

b） 配置树的参数setting，最重要配置callback事件右击节点事件来触发右击函数

1) zTreeOnRightClick 函数详解

2) showRMenu函数详解

3) onBodyMouseDown函数详解

c）添加节点

1）当右键某一节点时通过点击“增加节点”触发addTreeNode()函数

2）通过添加按钮触发addNode()进行后台处理以及前台显示

3）后台java代码详解

4）添加节点完成！！！！

d）修改节点

1）当右键某一节点时通过点击“编辑节点”来触发updateTreeNode()函数

2） 通过修改按钮调用updateNode()方法进行后台处理以及前台显示

3）后台java代码详解

4）修改节点完成！！！！ e）删除节点

1） 当右键某一节点时通过点击“删除节点”来触发removeTreeNode()函数

2） 后台java代码详解

3）删除节点完成！！！！

异步加载zTree

一：页面端

二：java端

1） 在菜单对象中添加isParent 属性，并生成get和set方法\\

2） 通过action访问service，service访问dao，将以pid为条件查询出菜单列表放入list中，然后再查出所有菜单列表放入另一个list中，遍历list，通过两者的id与pid比较是否相等以及根节点的pid为0，得到某一节点为父节点，然后将isParent 设置为true，最后将list通过JSONARRAY.fromObject方法转换成json数组发送给页面

3） 异步加载树成功

本文来源：https://www.bwwdw.com/article/fj36.html