jqueryzTree原理
更新时间:2024-06-12 19:31:01 阅读量: 综合文库 文档下载
- 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) 异步加载树成功
正在阅读:
jqueryzTree原理06-12
电力公司化效能监察情况汇报材料01-15
九年级物理《变阻器》学案鲁教版03-16
2016中国化学类类专业大学排行榜02-08
2022年关于法制宣传策划方案范文6篇03-23
管理学基础chapter12.ppt04-27
2013新版七年级上册语法知识复习资料12-02
党课讲稿:发展才是社会主义02-23
为爱伤心的话语02-14
2015年管道运输现状研究及发展趋势报告06-17
- 多层物业服务方案
- (审判实务)习惯法与少数民族地区民间纠纷解决问题(孙 潋)
- 人教版新课标六年级下册语文全册教案
- 词语打卡
- photoshop实习报告
- 钢结构设计原理综合测试2
- 2014年期末练习题
- 高中数学中的逆向思维解题方法探讨
- 名师原创 全国通用2014-2015学年高二寒假作业 政治(一)Word版
- 北航《建筑结构检测鉴定与加固》在线作业三
- XX县卫生监督所工程建设项目可行性研究报告
- 小学四年级观察作文经典评语
- 浅谈110KV变电站电气一次设计-程泉焱(1)
- 安全员考试题库
- 国家电网公司变电运维管理规定(试行)
- 义务教育课程标准稿征求意见提纲
- 教学秘书面试技巧
- 钢结构工程施工组织设计
- 水利工程概论论文
- 09届九年级数学第四次模拟试卷
- jqueryzTree
- 原理
- 数据库原理期末考试6套题
- AutoCAD200X 布局(图纸空间)使用详解
- 福建省宁德市福鼎一中2014届九年级上期中考试数学试题及答案
- 概率论答案
- 张老师围棋习题(三步算路练习)
- 单片机原理及应用期末考试题试卷及答案
- 端州区2009-2010学年健康教育工作计划
- 四年级数学上册《用“四舍五入”法求近似数》的教学反思
- 全科医学概论复习题
- 常用汉字代码表
- 中学生美文摘抄名篇中的经典
- 网络安全解决方案
- 第一篇 第四章 多相流体的渗流机理
- 避雷接地等电位联结电源管PVC管隐蔽工程检查验收记录(精)
- 六年级科学下册教学计划
- 中学生诗词知识讲座第三讲
- 军队党支部工作实用手册
- 樊家村项目地块一级开发实施方案165722967
- 总黄酮测定
- 第三次