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. nova 命令管理虚拟机

    nova命令管理虚拟机: $ nova list #查看虚拟机$ nova stop [vm-name]或[vm-id] #关闭虚拟机$ nova start [vm-name]或[vm-id] #启 ...

  2. Linker Scripts3--简单的链接脚本命令1

    1.前言 这个部分我们描述了简单的链接脚本命令 2.设置entry point 程序中第一条运行的指令被称为入口点entry point,可以使用ENTRY链接脚本命令设置entry point,参数 ...

  3. C++ 解析Json——jsoncpp

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和xml类似,本文主要对VS2008中使用Jsoncpp解析json的方法做一下记录.Jsoncpp是个跨 ...

  4. python类的使用

    下面是一个员工类的创建及类对象的创建实例: #!/usr/bin/python # -*- coding: UTF-8 -*-class Employee: empCount = 0 def __in ...

  5. zabbix3.2监控redis

    redis的监控 .监控脚本 # vim /usr/local/zabbix_agents_3.2.0/scripts/redismonitor.sh #! /bin/bash #Name: redi ...

  6. String类型作为方法的形参

    代码: public class TestString { String str = new String("good"); char [] ch = {'a','b','c'}; ...

  7. Django 笔记（四）模板标签 ~ 自定义过滤器

    模板标签: 标签在渲染的过程中提供任意的逻辑 语法: 由{% ... %} 和 {% end... %} 常用标签: with:类似取别名 模版继承: Django模版引擎中最强大也是最复杂的部分就是 ...

  8. Ajax 执行顺序

    jQuery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  9. 【Android开发经验】android:windowSoftInputMode属性具体解释

    本文章来自CSDN博客:http://blog.csdn.net/zhaokaiqiang1992.转载请注明地址! 在前面的一篇文章中,简单的介绍了一下怎样实现软键盘不自己主动弹出,使用的方法是设置 ...

  10. python----动态规划

    不能放弃治疗,每天都要进步!! 什么时候使用动态规划呢? 1. 求一个问题的最优解 2. 大问题可以分解为子问题,子问题还有重叠的更小的子问题 3. 整体问题最优解取决于子问题的最优解(状态转移方程) ...