传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

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

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


点击有惊喜






分享至 : QQ空间
收藏

16 个回复

倒序浏览
666学到了~
回复 使用道具 举报
66666666666
回复 使用道具 举报
学习树形
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
666学到了~
回复 使用道具 举报
想好好学习
回复 使用道具 举报
看一看,学一学,顶一顶
回复 使用道具 举报
看一看,学一学,顶一顶
回复 使用道具 举报
adasdasdasdasdasd
回复 使用道具 举报
传智播客你好
回复 使用道具 举报
学习一下!~
回复 使用道具 举报
感谢分享
回复 使用道具 举报
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
回复 使用道具 举报
过来看看
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条