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
posted on
