黑马程序员技术交流社区

标题: 【广州前端】-【JQuery插件】- zTree树插件 [打印本页]

---

作者: AngularBaby    时间: 2018-1-3 16:31
标题: 【广州前端】-【JQuery插件】- zTree树插件


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

源码下载地址：https://gitee.com/zTree/zTree_v3.git


演示效果如下：



以gif中的Demo为例
Demo完整目录如下：



步骤：
1、 引入文件
1.1 引入zTree样式文件，并保证目录中 zTree 自带的 img 路径正确



img路径需要正确



1.2 引入各种JS文件
先引入JQ，后引入ztree



2、 在html的body中编写根节点
添加 class="ztree" 来加载样式
添加 id="treeDemo" ，在JS中初始化


3、 编写JS文件
结构如下


代码如下：

[JavaScript] 纯文本查看 复制代码

 

 var setting = {

            // 更多设置写 setting 这里，详情见 API文档

            check: {

                enable: true,

            }

        };

        var zNodes = [

            {

                name: "test1", open: "true",

                children: [

                    { name: "test1_1" },

                    { name: "test1_2" }

                ]

            },

            {

                name: "test2", open: "true",

                children: [

                    { name: "test2_1", nocheck: true },

                    { name: "test2_2", checked: true },

                    { name: "test2_3", }

                ]

            }

        ];

        $(function () {

            var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        })

API文档查看：API文档

回复下载案例Demo

点击查看更多精彩前端资源

点击有惊喜

---

作者: vuer    时间: 2018-1-4 14:38
666学到了~

---

作者: heima.com    时间: 2018-4-8 13:50
66666666666

---

作者: 2009llyy    时间: 2018-4-9 14:09
学习树形

---

作者: 霸王    时间: 2018-4-9 19:46
谢谢楼主666

---

作者: 繁华落尽的凄凉    时间: 2018-4-10 10:52

---

作者: 繁华落尽的凄凉    时间: 2018-4-10 10:53

---

作者: 繁华落尽的凄凉    时间: 2018-4-10 10:56
666学到了~

---

作者: @java    时间: 2018-4-10 11:02
想好好学习

---

作者: yzwljlb    时间: 2018-4-13 09:26
看一看，学一学，顶一顶

---

作者: 番茄炒鸡蛋    时间: 2018-4-14 09:24
看一看，学一学，顶一顶

---

作者: laoK    时间: 2018-4-16 09:33
adasdasdasdasdasd

---

作者: chenzheng13    时间: 2018-6-25 23:58
传智播客你好

---

作者: 番茄炒鸡蛋    时间: 2018-6-26 10:13
学习一下！～

---

作者: liuq520    时间: 2018-8-13 17:16
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

---

作者: yuxinabc1    时间: 2018-10-27 17:04
过来看看

---

作者: chenwen992003    时间: 2019-1-9 11:49
学习使用中。。。。。

---

作者: 199807xh    时间: 2019-3-8 22:25
看看看看看看看看

---

作者: nxwzs    时间: 2020-7-20 10:41
谢谢楼主，正好需要。

---

作者: nxwzs    时间: 2020-7-20 10:49
怎么是官网的demo风格，没有黑色背景的风格图标啊。。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2