zTree的使用

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
}
}
来个简单的demo;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
    <script src ="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div>
    <ul id="regionZTree" class="ztree"></ul>
</div>
</body>
<script>
    var setting = {

        view: {      
            showLine:true,
//          showIcon: showIconForTree 设置后不现实图标
        },
        data: {
            simpleData: {
                enable: true, //设置是否启用简单数据格式(zTree支持标准数据格式跟简单数据格式,上面例子中是标准数据格式)
                idKey: "id",  //设置启用简单数据格式时id对应的属性名称
                pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
            }
        },
        check:{
            enable: true   //设置是否显示checkbox复选框
        },
        callback: {
//            beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数,并且根据返回值确定是否允许展开操作
        }
    };

    var dominZTree =[
        { id:1,pId:0,name:"中国",iconOpen:"css/zTreeStyle/img/diy/1_open.png", iconClose:"css/zTreeStyle/img/diy/1_close.png"},
        { id:11,pId:1,name:"河南"},
        { id:111,pId:11,name:"鹤壁"},
        { id:1111,pId:111,name:"淇县"},
        { id:1112,pId:111,name:"浚县"},
        { id:113,pId:11,name:"新乡"},
        { id:1114,pId:113,name:"牧野"},
        { id:1115,pId:113,name:"红旗区"},
        { id:12,pId:1,name:"湖北",open:true, icon:"css/zTreeStyle/img/diy/4.png"},
        { id:121,pId:12,name:"黄冈",url:"https://www.baidu.com/", target:"_blank"},
        { id:1211,pId:121,name:"黄冈1"},
        { id:1212,pId:121,name:"黄冈1"},
        { id:131,pId:12,name:"武汉"},
        { id:1311,pId:131,name:"武汉1"},
        { id:1312,pId:131,name:"武汉2"},
    ]
    function showIconForTree (treeId, treeNode) {
        return !treeNode.isParent;
    }
    zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree);
</script>
</html>

下图为展开效果
在这里插入图片描述
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可以获得多个节点。

setting.view.showLine 属性,详细请参见 API 文档中的相关内容
默认展开的节点,请设置 treeNode.open 属性 true 展开
无子节点的父节点,请设置 treeNode.isParent 属性 true 没有子节点
1、节点自定义字体请设置 setting.view.fontCss 属性,详细请参见 API 文档中的相关内容
2、setting.view.nameIsHTML 属性可以允许节点名称支持 HTML 内容,详细请参见 API 文档中的相关内容

增删改查节点

setting.edit.showRemoveBtn = true
setting.edit.showRenameBtn = true
setting.edit.removeTitle = “remove”
setting.edit.renameTitle = “rename”

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值