jqueryzTree原理Word文件下载.docx
- 文档编号:19191224
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:11
- 大小:1.12MB
jqueryzTree原理Word文件下载.docx
《jqueryzTree原理Word文件下载.docx》由会员分享,可在线阅读,更多相关《jqueryzTree原理Word文件下载.docx(11页珍藏版)》请在冰豆网上搜索。
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”):
2.setting:
二:
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()方法进行后台处理以及前台显示
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)异步加载树成功
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jqueryzTree 原理