zTree简单使用

Posted 2020-08-06 y丶卿

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 = {
    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 = [];
    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();
})