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. tkinter模块常用参数python

    1.使用tkinter.Tk()生成主窗口(root = tkinter.Tk()) root.title("标题名")       修改窗体的名字,也可以在创建的时候使用clas ...

  2. android 多模块项目构建一

    项目构建之项目文件搭建: 1.在android studio中new project,如:mydemo,如在D盘下. 2.创建几个module,选择为Library. 3.项目中用到多模块,最好使用动 ...

  3. cartographer 最新版安装测试

    在官网的基础上稍加修改,但保证代码都是最新的 我的系统配置: Debian9 strech,  ROS lunar 该方法对 ubuntu 系列操作系统以及其他ROS版本同样适用. 1.  安装依赖库 ...

  4. tomcat 嵌入式

    背景 开源世界真是有意思,竟然还有这种玩法.以前一直想bs程序如何像cs程序作为安装包形式,这个就是个解决方案. 知识点 将tomcat嵌入到主程序中进行运行,而不是像以前将一个web项目copy到t ...

  5. sqlserver 导出数据

    背景 一看到这个标题,还有这个内容,感觉当初记录这个知识点真是记录的太简单了.不过通过这个知识点我还真想起了当初的一些事情.写的题外话可能更有意思,希望每篇文章我都能加个当时的题外记录.当时一直搞or ...

  6. MySQL(介绍，安装，密码操作，权限表)

    一.数据库介绍1.数据库相关概念 a.支持并发     b.锁的问题     c.对客户端请求进行认证     d.存取效率(降低IO次数)    数据库服务器(本质就是一个台计算机,该计算机之上安装 ...

  7. 解决ssh登陆很慢的问题

    解决步骤: 先备份/etc/ssh/sshd_config,备份命令为 cp /etc/ssh/sshd_config /etc/ssh/sshd_config.bak 1.su (以root用户登录 ...

  8. centos6.5环境wget报错Unable to establish SSL connection

    centos6.5环境wget报错Unable to establish SSL connection [root@centossz008 src]# wget --no-check-certific ...

  9. boost.Asio lib

    Documentation for Boost.Asio http://www.boost.org/doc/libs/1_62_0/doc/html/boost_asio.html https://w ...

  10. linux中shell变量$#,$@,$0,$1,$2的含义解释 （转载）

    变量说明: $$Shell本身的PID(ProcessID)$!Shell最后运行的后台Process的PID$?最后运行的命令的结束代码(返回值)$-使用Set命令设定的Flag一览$*所有参数列表 ...