zTree入门实例（一眼就看会）

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

下载地址：https://gitee.com/zTree/zTree_v3

待会将上面划的三个文件复制到Java的Web工程下即可

先看实现效果：

1、Eclipse中新建Web工程

2、将上面划的三个文件复制到工程的WebContent目录下，并在WebContent下新建test.html文件

3. test.html完整内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
<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>

</head>

<body>

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

</body>
</html>

4. 启动工程即可看到：

zTree参考和下载网址：http://www.treejs.cn/v3/main.php#_zTreeInfo