码迷,mamicode.com
首页 > 其他好文 > 详细

zTree简单使用

时间:2016-09-02 23:11:15      阅读:481      评论:0      收藏:0      [点我收藏+]

标签:

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();
})

 

zTree简单使用

标签:

原文地址:http://www.cnblogs.com/shinhwazt/p/5828031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!