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还提供了一种简单的数据模式，他是一个数组对象。

数据集合常用属性：

如果是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样式比较好看是很不错的“树插件”。