jqueryzTree原理.docx
《jqueryzTree原理.docx》由会员分享，可在线阅读，更多相关《jqueryzTree原理.docx（11页珍藏版）》请在冰豆网上搜索。
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
数据库表中字段必须要有三个：
idpidname
思路详解
动态显示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表的详细信息
1.页面端
引入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）添加divtreeClass来加载zTree，添加divmenu，menu里有四个文本框为id，pid，name，url，以及添加右键事件divrMenu，rMenudiv包含一个ulli列表，ulli列表内容为：
添加节点，删除节点，编辑节点,,并设置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）异步加载树成功
升级会员 