zTree -- jQuery 树插件的使用

╰半橙微兮° 2022-05-17 01:24 286阅读 0赞

官网地址：[http://www.treejs.cn/v3/main.php\#\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTreeInfo]

## 一、介绍 ##

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

特点：

*  zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
 *  采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
 *  兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
 *  支持 JSON 数据
 *  支持静态 和 Ajax 异步加载节点数据
 *  支持任意更换皮肤 / 自定义图标（依靠css）
 *  支持极其灵活的 checkbox 或 radio 选择功能
 *  提供多种事件响应回调
 *  灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
 *  在一个页面内可同时生成多个 Tree 实例
 *  简单的参数配置实现 灵活多变的功能

## 二、使用 ##

**（1）引入ztree组件**

注意：需要添加jquery依赖

**（2）向body中添加div**

**（3）添加ztree设置**

<SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = {}; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） var zNodes = [{ name: "test1", open: true, children: [ { name: "test1_1" }, { name: "test1_2" } ] }, { name: "test2", open: true, children: [ { name: "test2_1" }, { name: "test2_2" } ] } ]; $(document).ready(function() { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTreeObj.expandAll(true);//展开树 }); </SCRIPT>

**（4）页面效果**  
![这里写图片描述][70]

**（5）项目截图及html代码**  
![这里写图片描述][70 1]

html页面

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>ztree测试页面</title>
            <link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
            <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
        </head>
    
        <body>
            <div>
                <div id="treeDemo" class="ztree">
                </div>
            </div>
            <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = {}; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） var zNodes = [{ name: "test1", open: true, children: [ { name: "test1_1" }, { name: "test1_2" } ] }, { name: "test2", open: true, children: [ { name: "test2_1" }, { name: "test2_2" } ] } ]; $(document).ready(function() { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </SCRIPT>
        </body>
    
    </html>

## 三、一些方法 ##

**（1）设置展开树**

$(document).ready(function() { 
                    zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
    
                    //展开所以节点
                    //zTreeObj.expandAll(true);
    
                    //展开第一级数节点
                    var nodes = zTreeObj.getNodesByParam("level", 0);
                    for(var i = 0; i < nodes.length; i++) {
                        zTreeObj.expandNode(nodes[i], true, false, false);
                    }
                });

## 四、setting 配置详解 ##

一些比较常用的配置  
**（一）check**

1、enable: true  
        设置 zTree 的节点上是否显示 checkbox / radio
        默认值: false

**（二）view**

selectedMulti: false 设置是否允许同时选中多个节点。默认是true

**（三）data**

simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }
    
        var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
                        { "id": 11, "pid": 1, "name": "test11" },
                        { "id": 12, "pid": 1, "name": "test12" },
                        { "id": 111, "pid": 11, "name": "test111" }
                    ];

效果：  
![这里写图片描述][70 2]

[http_www.treejs.cn_v3_main.php_zTreeInfo]: http://www.treejs.cn/v3/main.php#_zTreeInfo
[70]: /images/20220517/2a2ea7e24a6542faa23f8523e829b671.png
[70 1]: /images/20220517/e6125c865e0440cfb28bcd92c0e38667.png
[70 2]: /images/20220517/872a713691fa48d59c927a0d7dea5613.png