现在位置首页 / 项目实战 /正文

ztree入门教程

作者: IT小兵 | 2016年11月29日| 热度:℃ | 评论: |参与:

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:

 
 initTree(){     teacherList = data.teacher;     studentList = data.student;     treeData = [];
    treeData.push({id:"root",name:"学校",pId:});    ( i=0,il=teacherList.length;i<il;i++){
        teacherList[i].pId = "root";
        treeData.push(teacherList[i]);
    }    ( 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();
})
 

 


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询