zTree的重点

Posted hzhjxx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了zTree的重点相关的知识,希望对你有一定的参考价值。

今天学习了zTree插件,记录一下使用步骤:

 

1 下载,把下载好的目录整个放在项目中

文件夹目录:

js:一般引这jquery.ztree.all.js和jquery.ztree.core.js

css::用zTreeStyle里面的zTreeStyle.css

demo:示例:可以右键--查看框架信息,可以看到网址,再打开相应的文件,查看代码

api:帮助文档

 

2

1)引入css,引入jquery,引入zTree.js

2)加一个结构代码

<div id="treeDemo" class="ztree"></div>,注意id和class必须有。

3)然后从demo中把js拷贝下来

4)主要修改setting配置 和 Znodes 数据

 

3 一般使用“简单json”这种数据格式,

数据是从是数据库中得到的,是一个二维数组,

可以用for循环把数据添加到ztree的数据节点中(代码在最后)

其他可以查看api中的“treeNode 节点数据详解”

 

5 setting 配置详解

回调函数举例:

onclick,有三个参数比较重要:

技术分享图片

 

总体示例:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>z-tree</title>
		<link rel="stylesheet" href="../../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
		<script src="../../lib/jquery-3.2.1.min.js"></script>
		<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>

		<script>		
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: { //回调函数
				onClick: zTreeOnClick
			}
		};
		
		//点击时弹出id和名称
		function zTreeOnClick(event, treeId, treeNode){
			console.log(treeNode.id+treeNode.name);
		}
		
		//原始数据
		var arr=[
			[1,‘山东‘,0],
			[2,‘辽宁‘,0],
			[3,‘江苏‘,0],
			[11,‘淄博‘,1],
			[21,‘大连‘,2],
			[31,‘南京‘,3],
			[111,‘张店‘,11],
		];
		
		//z-tree数据
		var zNodes=[];
		
		//把原始数据放入z-tree数据中(是一个json)
		for(var i=0; i<arr.length; i++){
			zNodes.push({
				id:arr[i][0],
				name:arr[i][1],
				pId:arr[i][2]
			})
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});		
	</script>
	</head>

	<body>
		<div id="treeDemo" class="ztree"></div>
	</body>

</html>

效果:

技术分享图片

可以在控制台查看点击时的效果

 

总结:ztree的使用还比较简单,api不大容易看,直接看demo示例就可以,遇到相应功能,直接拷贝就行。插件这种东西还是重在理解,不需要在意写法,都是规定好的,就是拿过来直接用。所以,还是要实际项目中,有机会用一遍,才能发现问题。 

以上是关于zTree的重点的主要内容,如果未能解决你的问题,请参考以下文章

输入框点击下滑ztree菜单

zTree的核心处理逻辑

ztree java 前后台代码(input与ztree结合)

004 ztree入门 - bos

js树形控件—zTree使用总结(转载)

jQuery+zTree加载树形结构菜单