jQuery zTree树插件的使用教程
本文为大家分享了jQuery zTree树插件的使用教程，供大家参考，具体内容如下
一、介绍
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
特点：
- zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
- 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
- 支持 JSON 数据
- 支持静态 和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标（依靠css）
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
- 简单的参数配置实现 灵活多变的功能
二、使用
（1）引入ztree组件
注意：需要添加jquery依赖
<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script> <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
（2）向body中添加div
<div> <div id="treeDemo" class="ztree"> </div> </div>
（3）添加ztree设置
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [{
name: "test1",
open: true,
children: [
{ name: "test1_1" }, { name: "test1_2" }
]
},
{
name: "test2",
open: true,
children: [
{ name: "test2_1" }, { name: "test2_2" }
]
}
];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTreeObj.expandAll(true);//展开树
</SCRIPT>
（4）页面效果
（5）项目截图及html代码
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ztree测试页面</title>
<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="treeDemo" class="ztree">
</div>
</div>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [{
name: "test1",
open: true,
children: [
{ name: "test1_1" }, { name: "test1_2" }
]
},
{
name: "test2",
open: true,
children: [
{ name: "test2_1" }, { name: "test2_2" }
]
}
];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</body>
</html>
三、一些方法
（1）设置展开树
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
//展开所以节点
//zTreeObj.expandAll(true);
//展开第一级数节点
var nodes = zTreeObj.getNodesByParam("level", 0);
for(var i = 0; i < nodes.length; i++) {
zTreeObj.expandNode(nodes[i], true, false, false);
}
});
四、setting 配置详解
一些比较常用的配置
（一）check
1、enable: true
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false
（二）view
selectedMulti: false 设置是否允许同时选中多个节点。默认是true
（三）data
simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' }
var zNodes = [{ "id": 1, "pid": 0, "name": "test1" },
{ "id": 11, "pid": 1, "name": "test11" },
{ "id": 12, "pid": 1, "name": "test12" },
{ "id": 111, "pid": 11, "name": "test111" }
];
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
zTree jQuery 树插件的使用(实例讲解)
分享说明: 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去. 效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果;一级子节点数量展示效果. 外部引入资源 <link rel=&qu
-
多功能jQuery树插件zTree实现权限列表简单实例
zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAPI下载链接 页面主要引入一下几个文件: <link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> <script type="text/javascript&q
-
jQuery树插件zTree使用方法详解
最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te
-
Jquery树插件zTree实现菜单树
本文实例为大家分享了zTree插件实现菜单树的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Title</title> <
-
jQuery zTree树插件简单使用教程
前言 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 支持静态 和 Ajax 异步加载节点数据. 在开发中我们常需要用到树状的展示. 下载地址:zTree 静态zTree开发流程 引入资源 <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/c
-
jQuery zTree树插件动态加载实例代码
需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全加载不出来.于是需要进行优化为动态加载(增量加载)的方式,以便数据加载,提高体验度. 解决断路: 这应该好办,只要找到父节点单击事件,然后进行数据加载,结点附加即可.时间紧,任务重,完全没给研究的时间.只能硬着上,随便搜索一个"zTree动态加载",出是出来了,标题也对,可里面的代码根本没
-
Jquery树插件zTree用法入门教程
本文实例分析了Jquery树插件zTree用法.分享给大家供大家参考.具体分析如下: 关于zTree的介绍就搜吧. 这个例子的最终效果如下: 鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个.至于要添加些什么信息由自己决定. 1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css 复制代码 代码如下: <script type="text/javascript" src=&
-
jQuery zTree树插件的使用教程
本文为大家分享了jQuery zTree树插件的使用教程,供大家参考,具体内容如下 一.介绍 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 官网地址 特点: zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.Safari 等浏览器 支持 JSON
-
Jquery zTree 树控件异步加载操作
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动.编辑.删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 异步加载的意思就是: 当点
-
zTree 树插件实现全国五级地区点击后加载的示例
在项目功能中需要录入户籍地和现居住地,为减少用户输入量,将使用树插件选择全国五级地区+输入框输入详细地址.这里优先使用了zTree树插件.为了以后使用学习,在这里进行相关记录.当然在实现过程中参考各大神的文章是必不可少的,可以结合了自己的实际需求进行快速解决问题. zTree 树插件官网简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 树插件官网地址 http://www.treejs.c
-
jquery zTree异步加载、模糊搜索简单实例分享
本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:
-
jQuery zTree插件使用简单教程
本文实例为大家分享了jQuery zTree插件使用简单教程,供大家参考,具体内容如下 首先说一下,在web开发过程中会有很多的地方需要到树形的插件,JQuery 就有树的插件,本次简单教程讲的是zTree的使用教程. 官方下载地址 第一步,HTML <ul id="deptTree" class="ztree"></ul> 第二步,zTree在init的时候都需要什么参数 zTree 初始化方法,创建 zTree 必须使用此方法 $.fn.