zTree的使用方法以及学习笔记
zTree
最近在练习做后台管理系统项目的时候学习到了一个比较好用的“树结构”插件。简单的demo演示
他是基于 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);
先初始化然后根据配置和treeData“种树”。一般来说treeData是通过ajax从后端拿到的，这里为了展示直接把数据写出来了。
最后出来的效果，当然可以通过需求通过增加不同的属性及其属性值来达到需求。
总结
zTree的风格还是比较简约的，使用方式也比较简单，css样式比较好看是很不错的“树插件”。