一、介绍

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

特点：

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

通过官网下载demo或者下载zTree相关的插件

官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

二、使用

（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>
    //js方法
	function test(event, treeId, treeNode){
		 alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
	}
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
		check:{
			enable: true,
			autoCheckTrigger:true,
			chkStyle:"checkbox"
		},
		callback:{
			onCheck:test
		}
	};
   	// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   	var zNodes = [
	    {name:"test1", open:true,"checked":"true", children:[
		{name:"test1_1","checked":"true"}, {name:"test1_2"}]},
	   	{name:"test2", open:true, children:[
	    	{name:"test2_1"}, {name:"test2_2"}]}
   	];
   	$(document).ready(function(){
    	//页面加载成功后,开始加载树形结构
   		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
   	});
<script>

ztree树形插件使用总结：
1.ztree的配置对象
2.绑定的DOM节点
3.显示的数据

示例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>静态ztree</title>
	<link rel="stylesheet" href="./zTree_v3/css/zTreeStyle/zTreeStyle.css">
	<script src="./zTree_v3/js/jquery-1.4.4.min.js"></script>
	<script src="./zTree_v3/js/jquery.ztree.core.min.js"></script>
	<script>
		//1.配置对象
		var setting = {};
		//2.显示的数据
		var cates = [
			{id:1,name:'根编目',cate_path:null},
			{id:2,name:'Java课程',cate_path:'1.2'},
			{id:3,name:'Spring课程',cate_path:'1.2.3'},
			{id:4,name:'SpringBoot课程',cate_path:'1.2.3.4'},
			{id:5,name:'Web课程',cate_path:'1.5'},
			{id:6,name:'Servlet课程',cate_path:'1.2.6'},
			{id:7,name:'React课程',cate_path:'1.5.7'},
			{id:8,name:'redux课程',cate_path:'1.5.7.8'},
			{id:9,name:'HTML5课程',cate_path:'1.5.9'},
			{id:10,name:'HTML5API课程',cate_path:'1.5.9.10'},
			{id:11,name:'Python课程',cate_path:'1.11'},
			{id:12,name:'Djgo课程',cate_path:'1.11.12'},
		];
		cates = cates.filter(function(item){
			return item.cate_path;
		});
		cates.forEach(function(item){
			item.children = [];
			var parentsArr = item.cate_path.split('.');
			var parentId = parentsArr[parentsArr.length - 2];
			item.parent_id = +parentId;
		});
		cates.forEach(function(item){
			var parents = cates.filter(function(pItem){
				return item.parent_id === pItem.id;
			});
			if (parents.length > 0) {
				parents[0].children.push(item);
			}
		});
		var result = cates.filter(function(item){
			return item.cate_path.split('.').length === 2;
		});

		//3.DOM节点
		$(function(){
			//将DOM与配置对象与数据绑定,显示树
			$.fn.zTree.init($('#treeDemo'),setting,result);
		});
	</script>
</head>
<body>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<!-- #treeDemo放置ztree的地方 -->
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
</body>
</html>
效果

jquery tree 性能 jquery 树形插件_数据