A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 AngularBaby 于 2018-1-4 17:08 编辑

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

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


演示效果如下:
1.gif


以gif中的Demo为例
Demo完整目录如下:
0.0.png


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


img路径需要正确
1.1.1.png


1.2 引入各种JS文件
先引入JQ,后引入ztree
1.2.png


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

3、 编写JS文件
结构如下
3.1.png

代码如下:
[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

游客,如果您要查看本帖隐藏内容请回复


点击有惊喜






20 个回复

正序浏览
怎么是官网的demo风格,没有黑色背景的风格图标啊。。
回复 使用道具 举报
谢谢楼主,正好需要。
回复 使用道具 举报
回复 使用道具 举报
学习使用中。。。。。
回复 使用道具 举报
过来看看
回复 使用道具 举报
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
回复 使用道具 举报
感谢分享
回复 使用道具 举报
学习一下!~
回复 使用道具 举报
传智播客你好
回复 使用道具 举报
adasdasdasdasdasd
回复 使用道具 举报
看一看,学一学,顶一顶
回复 使用道具 举报
看一看,学一学,顶一顶
回复 使用道具 举报
想好好学习
回复 使用道具 举报
666学到了~
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
学习树形
回复 使用道具 举报
66666666666
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马