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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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

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

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


点击有惊喜






20 个回复

倒序浏览
666学到了~
回复 使用道具 举报
66666666666
回复 使用道具 举报
学习树形
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
666学到了~
回复 使用道具 举报
@java 初级黑马 2018-4-10 11:02:33
9#
想好好学习
回复 使用道具 举报
看一看,学一学,顶一顶
回复 使用道具 举报
看一看,学一学,顶一顶
回复 使用道具 举报
laoK 初级黑马 2018-4-16 09:33:07
12#
adasdasdasdasdasd
回复 使用道具 举报
传智播客你好
回复 使用道具 举报
学习一下!~
回复 使用道具 举报
pysl 中级黑马 2018-7-23 19:58:48
15#
感谢分享
回复 使用道具 举报
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
回复 使用道具 举报
过来看看
回复 使用道具 举报
学习使用中。。。。。
回复 使用道具 举报
回复 使用道具 举报
nxwzs 初级黑马 2020-7-20 10:41:53
20#
谢谢楼主,正好需要。
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马