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. Struts2学习（三）

    一.值栈 1.OGNL表达式 OGNL的概述:对象图导航语言,是一门功能强大的表达式语言. 2.值栈 值栈的概述(ValueStack):是一个接口,实现类OgnlValueStack.是数据的中转站 ...

  2. WC2019 游记

    Day 0 早上奇迹般的六点半起床平常这时候我还没睡呢 早餐在武汉站吃了一碗28的番茄牛肉米线,结果上菜后我把所有非米线的固体(包括番茄和牛肉)全挑出去了 高二大佬:一个愿宰一个愿挨 在高铁上待了四个 ...

  3. 【sql inject】sql盲注技巧

    SAMPLE 知识点 使用 AND 1 = 1 / 1 或者 1 = 1 / 0 判断是否存在注入,如果正确就会返回页面,如果错误就是1/0语法错误使得页面报错: queueID = 743994 A ...

  4. Python os.walk文件遍历用法【转】

    python中os.walk是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 1.载入 要使用os.walk,首先要载入该函数 可以使用以下两种方法 import os ...

  5. 设计模式C++学习笔记之三（Singleton单例模式）

    单例模式看起来也蛮简单的,就是在系统中只允许产生这个类的一个实例,既然这么简单,就直接贴代码了.更详细的内容及说明可以参考原作者博客:cbf4life.cnblogs.com. 3.1.解释 main ...

  6. cocos开发学习记录

    场景的创建和切换 https://blog.csdn.net/lin453701006/article/details/56334578

  7. c#基础之异常处理

    在开发过程中,经常遇到各种各样的小问题,很多是由于基础不牢固,没有经常总结导致的.遇到重复的问题可能可根据以往经验处理,但是对问题本身引发的原因进行深入的了解.工作很多年,但是c#基础像一层冰一样,可 ...

  8. Win2008R2配置WebDeploy发布网站

    一.配置服务器 1.安装管理服务 2.点击管理服务进行配置 二.安装WebDeploy 2.1通过离线安装包方式安装: https://www.iis.net/downloads/microsoft/ ...

  9. selenium之css定位小结

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

  10. js 正则提取img标签的src值

    var r = '<img[^<>]*? src="([^<>]*?)"'; var yyy=content.match(r); alert(yyy[ ...