ztree学习笔记(一)
在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一下学习的过程。
先简单介绍一下ztree。
ztree是一款依靠jQuery实现的“树形”插件,它的特点是性能优异,配置灵活,功能强大,经常用于一些项目的功能管理和权限管理上,我自己接触的几个项目上的功能管理和权限管理上就用到了ztree插件。先向大家推荐一下ztree的中文API,个人觉得这个API对学习ztree很有帮助。网站是http://www.treejs.cn/v3/demo.php#_101。希望对学习ztree的朋友有所帮助。
ztree有三个js文件jquery.ztree.core-3.x.js,jquery.ztree.excheck-3.x.js,jquery.ztree.exedit-3.x.js
使用ztree时必须用到的是核心包 jquery.ztree.core-3.x.js,此外还需要引入一个zTreeStyle1.css文件,此文件是ztree的样式。我的项目中还用到了jquery.ztree.excheck-3.x.js,这个包的作用是提供单选复选框功能,还有一个包是编辑功能包 jquery.ztree.exedit-3.x.js 。因为项目比较简单不包含编辑功能所以没有用到。
下面通过项目中的一个小的权限管理来阐述一下具体实现。项目中的实际图形为
要创建ztree,必须创建ztree的初始化方法,当页面加载时,js首先执行ztree的$.fn.ztree.init(Obj,zSetting,zNodes)方法,我们看到,这个初始化方法有三个参数,先搞懂这三个参数是干嘛的
Obj,这个是ztree的对象,API中说到,ztree对象提供了操作ztree的方法,通过js操作ztree必须使用此对象,那么这个对象如何得到,可用el表达式通过ztree的div的id直接得到该对象,即Obj=${"id"}。
zSetting 里面配置了各种参数,是ztree对象的数据配置。
zNodes则是后台传过来的数据。
下面通过简单的代码来说明如何创建ztree。
这里我就不上后端的代码了,通过后台传过来的数据格式是这样的:
String functionList=
[{"id":"11","pId":"11","name":"信息采集"},{"id":"5","pId":"5","name":"信息查询","checked":true},{"id":"12","pId":"11","name":"村居信息采集"},{"id":"6","pId":"5","name":"村居信息查询","checked":true},{"id":"32","pId":"31","name":"用户管理"},{"id":"26","pId":"26","name":"统计分析"},{"id":"13","pId":"11","name":"农户信息采集"},{"id":"7","pId":"5","name":"农户信息查询","checked":true},{"id":"28","pId":"26","name":"村居信息统计"},{"id":"33","pId":"31","name":"角色管理"},{"id":"31","pId":"31","name":"平台管理"},{"id":"34","pId":"31","name":"权限管理"},{"id":"35","pId":"31","name":"单位管理"},{"id":"30","pId":"26","name":"农户家庭基本信息统计"},{"id":"29","pId":"26","name":"农户家庭成员信息统计"},{"id":"27","pId":"26","name":"农户家庭教育信息统计"},{"id":"37","pId":"31","name":"数据字典"},{"id":"38","pId":"26","name":"需求情况信息统计"},{"id":"40","pId":"26","name":"农户医疗情况统计"},{"id":"39","pId":"26","name":"农户水住行情况统计"}]
这是一个json类型的数组,ztree是使用json数据
前台js代码
$(function(){var setting = {check: {enable: true},data: {simpleData: {enable: true,/* idKey : "id",pIdKey :"pId",rootPid :null */}}};var zNodes =${functionList};$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});})</SCRIPT> <div class="treeClass" ><ul id="treeDemo" class="ztree" ></ul></div>
check的设置是是否显示单选框/复选框,setting里面的参数很多,全部记得的话很难,需要用到的时候直接看下API,API都有详细的说明。
之前看API的时候,看到setting里的参数data中的simpleData属性,里面有句话是这样说的:
true / false 分别表示 使用 / 不使用 简单数据模式
如果设置为 true,请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId,并且让数据满足父子关系。
我看了下它们的注释,idkey,节点数据中保存唯一标志的属性名称,当setting.data.simpleData.enable = true 时生效,默认值是“id”
PIdKey,节点数据中保存父节点的的唯一标志的属性名称,当setting.data.simpleData.enable = true 时生效,默认值是“PId”
我们看到,这两个参数都有默认值,所以,在后台传过来的参数名称必须与默认值保持一致,也就是上面的functionList中的数据形式,其实在setting.data.simpleData中是不必设置这几个参数的,只要传过来的参数名称与默认值保持一致就行了,当然,我们也可以自己命名参数的名称,但是就需要在setting.data.simpleData里面显示的设置一下。说到底还是idKey和pIdKey的参数名称前后台保持一致就行了。
当然这个是最简单的树形结构了,ztree还有很多功能,灵活多变,本次就先学习的这里,新手初学,可能会有一些理解不到位或者错误的地方,如果有朋友看到这篇文章发现有错误的地方欢迎指出,谢谢了。
转载于:https://www.cnblogs.com/JackSparrow-/p/7003884.html
ztree学习笔记(一)相关推荐
- 初级Java学习笔记总结
java高并发解决方案: 1.页面静态:静态访问消耗的资源少 信息录入然后生成静态页面以供访问 2.数据库集群和库表散列 主-从数据库关 ...
- PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置 首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解 发布: 2017年8月4日 7,195阅读 ...
- 容器云原生DevOps学习笔记——第三期:从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 容器云原生DevOps学习笔记——第二期:如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
- 2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记(下)
- 2020年Yann Lecun深度学习笔记(上)
2020年Yann Lecun深度学习笔记(上)
- 知识图谱学习笔记(1)
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用 知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
- 计算机基础知识第十讲,计算机文化基础(第十讲)学习笔记
计算机文化基础(第十讲)学习笔记 采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...
- Go 学习推荐 —(Go by example 中文版、Go 构建 Web 应用、Go 学习笔记、Golang常见错误、Go 语言四十二章经、Go 语言高级编程)
Go by example 中文版 Go 构建 Web 应用 Go 学习笔记:无痕 Go 标准库中文文档 Golang开发新手常犯的50个错误 50 Shades of Go: Traps, Gotc ...
- MongoDB学习笔记(入门)
MongoDB学习笔记(入门) 一.文档的注意事项: 1. 键值对是有序的,如:{ "name" : "stephen", "genda" ...
最新文章
- SpringBoot b2b2c 多用户商城系统(十五)Springboot整合RabbitMQ...
- java.io.CharConversionException: Not an ISO 8859-1 character:
- PWN学习总结(四)—— BROP
- 【Review】Review of Sprint 1 Sprint 2 planning
- python教程从入门到实践第八章_python:从入门到实践--第八章:函数
- iphone静态库的加载和调试
- C#位运算讲解与示例
- c语言不定参数的使用,C语言中不定参数的实现
- 9.包装类的构造方法
- IEEE 类各种模板下载--以IEEE Access为例
- Matlab2019 中文显示问题(乱码与方框)
- 浩方对战平台原理初步分析
- python数组增加维度_python – 为xarray DataArray添加维度
- 最好用的PS一键智能抠图插件,3秒就能扣好一张图
- 中国存储器“3+1”版图初现 行业要再跑5年马拉松
- 电影推荐系统(数据预处理+模型训练+预测)
- 七日年化收益率怎么计算
- oracle数据库创建物化视图
- oracle人语句大全,oracle查询语句大全
- 日本代数几何学派简介