首页 > 代码库 > zTree简单使用
zTree简单使用
zTree使用
zTree github地址
zTree API文档
zTree插件依赖JQ所以使用zTree首先引入JQ，另外zTree的点击功能，编辑功能都是单独的文件，如需使用也要引入(也可以引入全部功能的JS文件)。
引入zTree的css文件(zTreeStyle.css和demo.css)。
DOM结构如下：class="ztree"提供一些样式必须有,id作为数的唯一标识必须有，同时必须的ul元素。
<div> <ul class="ztree" id="first_tree"></div></div>
zTree的数据格式
zTree在使用JSON数据时，由两种数据格式供我们使用，分别是标准数据模式和简单数据模式
标准的数据模式为：
var nodes = {name:"第一层级",children:[{name:"第二层级",id:2,childred:[{}]}],id:1}标准的数据模式的数据是一个JSON对象，立面的name会用作显示节点的名称，children会用作第一个阶段的子节点，children里面是一个个的对象，这些对象也是第一层级的格式，层层嵌套最终形成一个数据集合用作加载tree。name和children是必须的属性，其他的属性根据我们的实际需求具体添加。
简单数据模式：
var nodes = [{name:"第一层级",id:0,pId:null},{name:"第二层级",id:1,pId:0},{name:"第一层级",id:2,pId:0}]
简单数据模式的数据是一个数组对象，数组中的每一个对象都必须包括name,id,pid，name用作显示当前的节点名称,id表示当前的节点的唯一标识可用来做关联父级节点的桥梁，pid也是用来做父子节点的桥梁的，在默认情况下如果pid为null则当前的这个对象表示是tree的顶层节点。其他的属性根据我们的实际需求可以自行添加。
zTree的数据集合中常用的属性
name:表示当前的节点名称
id:用作节点的唯一标识
pid：和id互相对应表示当前节点是哪一个节点的子节点(在简单JSON格式中使用)
childred:里面的数据表示当前数据节点的子节点(在标准JSON格式中使用)
icon：表示当前节点的图标
iconClose,iconOpen:节点在收缩/展开是的图标
noCheck:表示当前节点前面的radio/checkbox是否显示 true表示不显示
其他的属性根据我们的实际需求可以通过查看API来了解，除了zTree提供给我的属性外，我们可以在节点属性中添加任何的属性来方便我们的使用，比如我们需要使用一个remark的字段，我们就可以在节点属性添加该属性。
zTree的设置
在zTree中常用的设置属性为：data,check,callback其他的属性功能可以通过查看API来使用。
定义一个简单的设置：
var setting = { data:{//表示tree的数据格式 simpleData:{ enable:true,//表示使用简单数据模式 idKey:"id",//设置之后id为在简单数据模式中的父子节点关联的桥梁 pidKey:"pId",//设置之后pid为在简单数据模式中的父子节点关联的桥梁和id互相对应 rootId:"null"//pid为null的表示根节点 } }, view:{//表示tree的显示状态 selectMulti:false//表示禁止多选 }, check:{//表示tree的节点在点击时的相关设置 enable:true,//是否显示radio/checkbox chkStyle:"checkbox",//值为checkbox或者radio表示 checkboxType:{p:"",s:""},//表示父子节点的联动效果 radioType:"level"//设置tree的分组 }, callback:{//表示tree的一些事件处理函数 onClick:handlerClick, onCheck:handlerCheck }}
zTree的常用API使用
zTree所有的API都是都是由zTree的实例来调用的，所以在使用API的时候我们首先要获得我们想要操作的tree对象。
获取树对象的完成方式为：var treeObj = $.fn.zTree.getZTreeObj("tree")，参数为DOM的ID。
expandAll:展开或者折叠节点使用方式为 treeObj.expandAll(true) - >展开所有节点，设置为false为折叠所有节点。
getCheckedNodes:获得勾选的或者未勾选的节点使用方式为 treeObj.getCheckedNodes(true) - >获取所有勾选的节点，设置为false为所有未勾选的节点。
getNodeByParam:通过节点属性来获取一个节点使用方式为 treeObj.getNodeByParam("prop","value","parent"),第一个参数表示根据的属性名称，第二个参数表示属性值，第三个参数表示父级节点，
如果是在全局的范围内检索第三个参数设置为null即可。
getNodesByParam:和getNodeByParam使用方式一样，只不过getNodesByParam可以获得多个节点。
在实际开发过程中我们可以根据具体的需求去查看zTree的API文档，介绍的非常详细。
zTree的回调函数
我们定义好回调函数，在setting里面配置好即可：
function handlerClick(event,treeId,treeNode){ use treeId and treeNode to do sth……}
每一个回调都可以接受三个参数，第一个参数表示事件，第一个参数很少使用，第二个参数表示当前的树Id我们可以用这个参数来获取tree对象，进而使用zTree的API，第三个参数表示当前的作用节点，treeNode包括当前节点的所有属性。
zTree完整示例
假如我们从服务器获取到了一个数据对象，里面包括班主任，和所有学生，班主任和学生是一个一对多的关系
原始数据如下：
var data =http://www.mamicode.com/ { teacher:[ {id:0,name:"张老师",sex:"男"}, {id:1,name:"李老师",sex:"男"}, {id:2,name:"王老师",sex:"女"} ], student:[ {id:0,name:"学生A",sex:"男",tId:0}, {id:1,name:"学生B",sex:"男",tId:0}, {id:2,name:"学生C",sex:"女",tId:1}, {id:3,name:"学生D",sex:"女",tId:1}, {id:4,name:"学生E",sex:"男",tId:2}, {id:5,name:"学生F",sex:"女",tId:2} ]}
setting我们就采用上线的设置
DOM结构如下：
<div> <ul class="ztree" id="des_school"></ul></div>
构建tree:
function initTree(){ var teacherList = data.teacher; var studentList = data.student; var treeData =http://www.mamicode.com/ []; treeData.push({id:"root",name:"学校",pId:null}); for(var i=0,il=teacherList.length;i<il;i++){ teacherList[i].pId = "root"; treeData.push(teacherList[i]); } for(var i=0,il=studentList.length;i<il;i++){
studentList[i].id = "s"+studentList[i].id; studentList[i].pId = studentList[i].tId; treeData.push(studentList[i]); } $.fn.zTree.init($("#des_school"),setting,treeData);}
$(function(){
initTree();
})
zTree简单使用