树插件zTree--（一）简单介绍和简单实例

Lsp_Sean

于 2019-03-17 19:15:30 发布

阅读量673

点赞数

分类专栏：插件文章标签： ztree 树插件

本文链接：https://blog.csdn.net/Lsp_Sean/article/details/88622784

版权

插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。

zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现灵活多变的功能

样式结构如图下图所示

二、简单实例

2.1 引用说明

核心js ：jquery.ztree.core.min.js 、jquery-1.11.2.js

css文件：zTreeStyle.css （为了尽量避免样式冲突， zTree 容器的 className 修改为 'ztree'）

以上两个文件还有图标样式可到 http://www.treejs.cn 网站下载

2.2 实例说明

1.页面

显示树状结构容器，注意若用ztree自己的样式结构，class必须为“ztree”

<ul id="zTreeId" class="ztree"></ul>

2.ztree调用

ztree 初始化方法，setting为ztree的属性配置，TestData为要展示的数据；

$.fn.zTree.init($("#zTreeId"),setting, TestData);

详细代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/zTreeStyle.css"/>
</head>
<body>
	<div>
		<ul id="zTreeId" class="ztree"></ul>
	</div>
</body>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.ztree.core.min.js"></script>

<script type="text/javascript">
	var TestData = [
		{ id:"00000000", pId:0, name:"父节点-1",open: true,isParent:true},
		{ id:"00000001", pId:"00000000", name:"叶子节点-1.1",open: true,isParent:true},
		{ id:"00000003", pId:"00000001", name:"叶子节点-1.2"},
		{ id:"00000004", pId:"00000001", name:"叶子节点-1.3"},
		{ id:"00000002", pId:"00000000", name:"叶子节点-1.4",open: true,isParent:true},
		{ id:"00000005", pId:"00000002", name:"叶子节点-1.5"},
		{ id:"00000006", pId:"00000002", name:"叶子节点-1.6"},
		{ id:"00000007", pId:0, name:"父节点-2",open: true,isParent:true},
		{ id:"00000008", pId:"00000007", name:"叶子节点-2.1"},
		{ id:"00000009", pId:"00000007", name:"叶子节点-2.2"},
		{ id:"00000010", pId:"00000007", name:"叶子节点-2.3"}
	];

	var setting = {
		data: {
			simpleData: {
				enable: true
			}
		}
	};
	$.fn.zTree.init($("#zTreeId"),setting, TestData);
</script>
</html>

展示效果如下图所示：