zTree是一款挺好用的树形插件，中文文档齐全，demo丰富。

官方网站是 http://www.treejs.cn/v3/main.php#_zTreeInfo

源码网站 https://github.com/zTree/zTree_v3

使用方法：

1、引入jquery库

2、引入css和js

1
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
1
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>

4、初始化树

设置一个展示tree的DOM节点。（如果对DOM不了解，建议先学习HTML和JavaScript）

1
<ul id="treeDemo" class="ztree"></ul>

其中class要指定为ztree，这样才能显示为树形。

实例化ztree

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var setting = { };
 
var zNodes =[
    { name:"父节点1 - 展开", open:true,
        children: [
            { name:"父节点11 - 折叠",
                children: [
                    { name:"叶子节点111"},
                    { name:"叶子节点112"},
                    { name:"叶子节点113"},
                    { name:"叶子节点114"}
                ]},
            { name:"父节点12 - 折叠",
                children: [
                    { name:"叶子节点121"},
                    { name:"叶子节点122"},
                    { name:"叶子节点123"},
                    { name:"叶子节点124"}
                ]},
            { name:"父节点13 - 没有子节点", isParent:true}
        ]},
    { name:"父节点2 - 折叠",
        children: [
            { name:"父节点21 - 展开", open:true,
                children: [
                    { name:"叶子节点211"},
                    { name:"叶子节点212"},
                    { name:"叶子节点213"},
                    { name:"叶子节点214"}
                ]},
            { name:"父节点22 - 折叠",
                children: [
                    { name:"叶子节点221"},
                    { name:"叶子节点222"},
                    { name:"叶子节点223"},
                    { name:"叶子节点224"}
                ]},
            { name:"父节点23 - 折叠",
                children: [
                    { name:"叶子节点231"},
                    { name:"叶子节点232"},
                    { name:"叶子节点233"},
                    { name:"叶子节点234"}
                ]}
        ]},
    { name:"父节点3 - 没有子节点", isParent:true}
 
];
 
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

$.fn.zTree.init()函数实例化树，指定要渲染的DOM，ztree配置，及节点。

节点数据是JSON数据，符合当前软件开发的数据交换。

示例：

<!DOCTYPE html5>

<html>

	<head>

		<title>树形插件</title>

		<meta charset="UTF-8" />

		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>

		<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

		<script type="text/javascript" src="js/jquery.ztree.core.js"></script>

		<style type="text/css">

		</style>

	</head>

	<ul id="treeDemo" class="ztree"></ul>

	<script>

			var setting = { };

			var zNodes =[

				{ name:"父节点1 - 展开", open:true,

					children: [

						{ name:"父节点11 - 折叠",

							children: [

								{ name:"叶子节点111"},

								{ name:"叶子节点112"},

								{ name:"叶子节点113"},

								{ name:"叶子节点114"}

							]},

						{ name:"父节点12 - 折叠",

							children: [

								{ name:"叶子节点121"},

								{ name:"叶子节点122"},

								{ name:"叶子节点123"},

								{ name:"叶子节点124"}

							]},

						{ name:"父节点13 - 没有子节点", isParent:true}

					]},

				{ name:"父节点2 - 折叠",

					children: [

						{ name:"父节点21 - 展开", open:true,

							children: [

								{ name:"叶子节点211"},

								{ name:"叶子节点212"},

								{ name:"叶子节点213"},

								{ name:"叶子节点214"}

							]},

						{ name:"父节点22 - 折叠",

							children: [

								{ name:"叶子节点221"},

								{ name:"叶子节点222"},

								{ name:"叶子节点223"},

								{ name:"叶子节点224"}

							]},

						{ name:"父节点23 - 折叠",

							children: [

								{ name:"叶子节点231"},

								{ name:"叶子节点232"},

								{ name:"叶子节点233"},

								{ name:"叶子节点234"}

							]}

					]},

				{ name:"父节点3 - 没有子节点", isParent:true}

			];

			$(document).ready(function(){

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

			});

	</script>

</html>

　　

插件使用一树形插件---zTree的更多相关文章

  1. 插件使用一树形插件---zTree一zTree异步加载

    zTree 可以实现异步加载.异步加载可以让初次加载速度快,带来好的用户体验. 异步加载 官方源码中的demo提示了例子.例子是采用php语言. 在java语言中,zTree如何与Servlet结合呢 ...

  2. ztree树形插件

    在开发项目中需要用到树插件,近期研究了几款树插件,好记性不如烂笔头 ,写下来  以后好查 MzTreeView(梅花雪) 很经典的树形菜单脚本控件 菜单树展示加载速度快 支持1w条以上大数据 缺点-- ...

  3. 这是用过的"最差"树形插件

      这是用过的"最差"树形插件 !!! 或许大家听过一个bootstrap UI框架---ace皮肤.有兴趣的童鞋可以在线查看:https://www.iteblog.com/ac ...

  4. 【treeview】 基于jQuery的简单树形插件

    [treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jq ...

  5. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  6. github 码云 chrome文件树形插件

    偶然间看到github有一个树形插件,对于代码层级较多的项目来说体验提升了很多 github的chrome插件 chrome商店: https://chrome.google.com/webstore ...

  7. IDA插件栈字符串识别插件

    该插件是一款可以自动识别栈上局部变量为字符串的插件,字符串形式如下,并自动的加上注释                                       如图:可以自动识别栈上的字符串 项目主 ...

  8. jQuery插件 -- 动态事件绑定插件jquery.livequery.js

    http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调 ...

  9. Cordova - 常用的插件汇总（附插件的安装、查询、更新、删除等命令）

    Hybrid应用比web应用强大之处在于可以使运行在容器中的web内容访问 native APIs.Cordova 提供了许多插件用于调用移动设备上的API. 一,插件相关常用命令   1,查看所有已 ...

随机推荐

  1. tmux 简单介绍

    不定期更新. 虽然一直很抵制使用linux,尤其是服务器那种无界面的东东,但是没办法还是得用.平时连接上服务器后每次要执行一个新的命令都得开一个新窗口重新连接服务器,不仅麻烦,而且有的时候服务器或者我 ...

  2. tp5.0 SHOW COLUMNS FROM 生成数据表字段缓存

    TP5.0 生成数据表字段缓存 =控制台执行以下命令= 1.生成指定数据库的所有表字段缓存 php think optimize:schema --db databaseName 2.生成指定数据表的 ...

  3. [BugBounty] Sleeping stored Google XSS Awakens a $5000 Bounty

    来源:https://blog.it-securityguard.com/bugbounty-sleeping-stored-google-xss-awakens-a-5000-bounty/ 理解 ...

  4. Wasserstein CNN: Learning Invariant Features for NIR-VIS Face Recognition

    承接上上篇博客,在其基础上,加入了Wasserstein distance和correlation prior .其他相关工作.网络细节(maxout operator).训练方式和数据处理等基本和前 ...

  5. Datasnap 服务端 （Server）Session 管理 --- 解决 全示例慢（Google）

    Datasnap 服务端 (Server)Session  管理:  http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Server_Side_Ses ...

  6. centos6.9安装crontab

    yum install vixie-cron crontabs //安装 chkconfig crond on //开机自启动 service crond start //启动 然后就是执行 cron ...

  7. maven：手动安装JAR到本地仓库

    mvn install:install-file -DgroupId=com.test -DartifactId=test -Dversion=1.0.0 -Dpackaging=jar -Dfile ...

  8. iOS10 远程通知需要有entitlements的支持

    今天测试远程通知,发现ios9上可以收到,但是ios10上无法收到,原来是忘记开下面这个选项了: 这样看来iOS9 对这个entitlement没有什么依赖,但是10却是必须打开的!

  9. CDH运维

    1.单个节点宕机后,想可能存在的问题: 时间同步是否正常运行 hbase对时间是否同步很敏感 2.zookeeper报警 ZooKeeper 服务 canary 因未知原因失败. 该警报是在重启CM的 ...

  10. linux显示完整目录

    vim ~/.bashrc ##添加以下信息 export PS1='[\u@\h `pwd`]$ ' 然后保存退出 source  ~/.bashrc 或者关机重新启动即可