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. Spring学习1：Spring基本特性

    http://longliqiang88.github.io/2015/08/14/Spring%E5%AD%A6%E4%B9%A01%EF%BC%9ASpring%E5%9F%BA%E6%9C%AC ...

  2. costmap_2d 解析

    costmap_2d这个包提供了一种2D代价地图的实现方案,该方案利用输入的传感器数据,构建数据2D或者3D代价地图(取决于是否使用基于voxel的实现),并根据占用网格和用户定义的膨胀半径计算2D代 ...

  3. Python学习笔记-条件语句

    学习代码如下 flag=False name = raw_input("请输入:"); if name == '羊爸爸': flag=True print 'Welcome Hom ...

  4. Centos7.5 VMtools的安装与卸载

    一.安装 1.自带tools:  选择VMware工具栏 => 虚拟机 => 安装VMtools 2.挂载光驱 3.tar -zxvf VMwareTools-10.3.2-9925305 ...

  5. 【转】python3解析库lxml

    转自:http://www.cnblogs.com/zhangxinqi/p/9210211.html 阅读目录 1.python库lxml的安装 2.XPath常用规则 (1)读取文本解析节点 (2 ...

  6. 【转】shell速查表

    shell速查表 转自:https://www.jianshu.com/p/a98a334bfb25 1. 变量 #!/bin/bash msg="hello world" ech ...

  7. vc++基础班[28]---动态数组及动态链表的讲解

    C++中也有相应的动态数组.动态链表.映射表的模板类,就是STL中的:vector.list.map 他们属于C++标准中的一部分,对于程序的移植性来说也是不错的,但是在MFC编程中使用 CArray ...

  8. u3d发送邮件

    http://gad.qq.com/article/detail/22810 https://www.douban.com/note/655356118/ http://gad.qq.com/arti ...

  9. 通过python生成nginx模板配置文件

    通过python生成nginx模板配置文件 # cat config.py #coding=utf-8 nginx_conf = ''' server {{ listen {port}; server ...

  10. Redis持久化存储(AOF与RDB两种模式)

    Redis中数据存储模式有2种:cache-only,persistence; cache-only即只做为“缓存”服务,不持久数据,数据在服务终止后将消失,此模式下也将不存在“数据恢复”的手段,是一 ...