zTree的使用方法以及学习笔记

zTree

最近在练习做后台管理系统项目的时候学习到了一个比较好用的“树结构”插件。简单的demo演示
zTree的使用方法以及学习笔记
他是基于 jQuery 实现的多功能 “树插件”。下面是官网地址:点这里.

zTree的使用

首先因为Ztree是以来于jQuery当然是引用jQuery,以及zTree的js文件。然后引入zTree的css文件。文件引用完后,树的DOM结构必须有id作为唯一标识符以及ul元素

<div> 	<ul id="tree" class="ztree"></ul> </div> 

zTree的数据格式

1.zTree是支持JSON数据的,换句话说就是可以用JSON数据能够把树“种”出来。
2.zTree还提供了一种简单的数据模式,他是一个数组对象。

数据集合常用属性:

属性 作用
name 表示当前的节点名称
id 用作节点的唯一标识
pid 和id互相对应表示当前节点是哪一个节点的子节点(在简单JSON格式中使用)
childred 里面的数据表示当前数据节点的子节点(在标准JSON格式中使用)
icon 表示当前节点的图标
iconClose,iconOpen 节点在收缩/展开是的图标
noCheck 表示当前节点前面的radio/checkbox是否显示 true表示不显示

如果是JSON数据很显然,通过children作为子节点,以下面为例

var nodes = {name:"第一层级",children:[{name:"第二层级",id:2,childred:[{}]}],id:1} 

最终通过层层嵌套形成一棵树。name和children是必须的属性,其他的属性根据我们的实际需求具体添加。

接下来重点介绍的是简单化的数据模式,或者说扁平化的数据格式。

var treeData= [{dname:"第一层级",depId:0,parentId:0}, 	{dname:"第二层级",depId:1,parentId:0}, 	{dname:"第三层级",depId:11,parentId:1}, 	{dname:"第三层级",depId:12,parentId:1}]; 

这样的数据看起来就比较好理解了,这里要注意的是depID和parentID(判断他是哪一层级的属性)是通过setting来“设置”的,他们原本叫id和pid.

setting

直接上代码

var setting = { 	    data:{//表示tree的数据格式 	        simpleData:{ 	            enable:true,//表示使用简单数据模式 扁平化数据 	            idKey:"depId",//设置之后depId为在简单数据模式中的父子节点关联的桥梁 	            pIdKey:"parentId",//设置之后parentId为在简单数据模式中的父子节点关联的桥梁和id互相对应 	            rootId:"0"//parentId为0的表示根节点 	        }, 			key:{ 				name:"dname" 			} 	    }, 	    view:{//表示tree的显示状态 	        selectMulti:false//表示禁止多选 	    }, 	    check:{//表示tree的节点在点击时的相关设置 	        enable:false,//是否显示radio/checkbox 	        chkStyle:"checkbox",//值为checkbox或者radio表示 	       // checkboxType:{ "Y": "ps", "N": "ps" },//表示父子节点的联动效果勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效] 		   // radioType:"level"//设置tree的分组 			 	    }, 	    callback:{//表示tree的一些事件处理函数 	        onClick:handlerClick, 	        onCheck:handlerCheck 	    } 	} 

通过配置idKey和pidKey以及key来实现“改属性名”。
API文档.

“种”树

zTree所有的API都是都是由zTree的实例来调用的,所以在使用API的时候我们首先要获得我们想要操作的tree对象。

$.fn.zTree.init($("#tree"),setting,treeData); 

zTree的使用方法以及学习笔记
先初始化然后根据配置和treeData“种树”。一般来说treeData是通过ajax从后端拿到的,这里为了展示直接把数据写出来了。
最后出来的效果,当然可以通过需求通过增加不同的属性及其属性值来达到需求。
zTree的使用方法以及学习笔记

总结

zTree的风格还是比较简约的,使用方式也比较简单,css样式比较好看是很不错的“树插件”。

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » zTree的使用方法以及学习笔记

提供最优质的资源集合

立即查看 了解详情