zTree的使用

最新推荐文章于 2020-11-03 10:24:53 发布

qq_42849130

最新推荐文章于 2020-11-03 10:24:53 发布

阅读量505

点赞数 1

分类专栏： jquery 树文章标签： jquery ztree

本文链接：https://blog.csdn.net/qq_42849130/article/details/102663994

版权

jquery 树专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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”