1. 说明
ztree是一个jquery插件，树形UI.功能较强大，API手册做得很不错。其自带演示很强大，但要理清需花点时间。但是根据API手册，却能很快上手。
下面本人亲自动手写了相当于hello world的演示，亲自在netbeans 7, jquery 1.6 下测试通过。 由于在用nutz做一个项目，因此后台也就在nutz中测试了，给读者带来不便，请谅解。
PS:演示中ztree 用的是2.5 版本
PS1:文后提供了本文的WORD文档。
PS2:完整静态演示请看 3.3节与3.4节， 其与服务器交互，请看 第4节，
2. 准备工作
Jquery 1.6(至少可行)
官网地址：http://code.google.com/p/jquerytree/
http://www.baby666.cn/hunter/index.html
3. hello （静态）
3.1. 引用
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
3.2. 关键
(1) HTML 代码
<ul id="treeDemo" class="tree"></ul>
(2) 调用
zTree1 = $("#treeDemo").zTree(setting, zNodes);/
说明：
$("#treeDemo"). -----是ztree依附的节点，例子为UL节点
Setting------ 配置，
zNodes-------数据
(3) 数据格式1
var zNodes =[
{ name:"手机", ename:"Mobile", open:true,nodes: [
{ name:"诺基亚", ename:"Nokia",nodes: [
{ name:"C6(音乐版)", ename:"C6(Music)"},
{ name:"X6(导航版)", ename:"X6(GPS)"}
]},
{ name:"三星", ename:"Samsung",nodes: [
{ name:"I9000(联通版)", ename:"I9000(Unicom)"},
{ name:"I9000(移动版)", ename:"I9000(China Mobile)"},
{ name:"Galaxy Naos", ename:"Galaxy Naos"}
]},
{ name:"多普达", ename:"Dopod"}
]}
];
(4) 数据格式1（简）
var zTreeNodes = [
{"id":1, "name":"test1", "nodes":[
{"id":11, "name":"test11", "nodes":[
{"id":111, "name":"test111"}
]},
{"id":12, "name":"test12"}
]}
];
(5) 数据格式2
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
但是 zTree相应设置为：
var setting = {
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId"
};
3.3. demo1.html ----这是完整前台文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var zTree1;
var setting;
setting = {
editable: true,
keepParent: false,
keepLeaf: false
};
var zNodes =[
{ name:"手机", ename:"Mobile", open:true,nodes: [
{ name:"诺基亚", ename:"Nokia",nodes: [
{ name:"C6(音乐版)", ename:"C6(Music)"},
{ name:"X6(导航版)", ename:"X6(GPS)"}
]},
{ name:"三星", ename:"Samsung",nodes: [
{ name:"I9000(联通版)", ename:"I9000(Unicom)"},
{ name:"I9000(移动版)", ename:"I9000(China Mobile)"},
{ name:"Galaxy Naos", ename:"Galaxy Naos"}
]},
{ name:"多普达", ename:"Dopod"}
]},
{ name:"电脑", ename:"Computer", open:true, nodes: [
{ name:"硬件", ename:"Hardware",nodes: [
{ name:"主板", ename:"Motherboard"},
{ name:"CPU", ename:"CPU"},
{ name:"内存", ename:"Memory"},
{ name:"硬盘", ename:"Hard disk"},
{ name:"机箱", ename:"Chassis"},
]},
{ name:"整机", ename:"Software", nodes: [
{ name:"联想", ename:"Lenovo"},
{ name:"戴尔", ename:"Dell"},
{ name:"方正", ename:"Founder"}
]}
]}
];
$(document).ready(function(){
zTree1 = $("#treeDemo").zTree(setting, zNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="treeDemo" class="tree"></ul>
</BODY>
</HTML>
3.4. demo2.html -----这是完整前能代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-ztree-2.5.js"></script>
<SCRIPT LANGUAGE="JavaScript">
var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];
var zTree1;
var setting = {
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
};
$(document).ready(function(){
zTree1 = $("#treeDemo").zTree(setting, treeNodes);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="treeDemo" class="tree"></ul>
</BODY>
</HTML>
4. hello（动态）
4.1. html网页
说明：
Json方式与后台交互，关键点有两处
(1) ztree配置
var setting = {
async : true,
asyncUrl : "/article/admin/catalog/list_do",
-----
};
(2) 调用
$(document).ready(function(){
zTree1 = $("#treeDemo").zTree(setting);
});
下面是完整前台文件
aa.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/js/ztree/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/js/ztree/ztree.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
/* var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];*/
var zTree1;
var setting = {
async : true,
asyncUrl : "/article/admin/catalog/list_do",
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId"
};
$(document).ready(function(){
zTree1 = $("#treeDemo").zTree(setting);
});
</SCRIPT>
</HEAD>
<BODY>
<ul id="treeDemo" class="tree"></ul>
</BODY>
</HTML>
4.2. 服务器，基于nutz的，如果是基于其他的，请相应变动即可
@At("/article/admin/catalog/list_do")
@Ok("raw:json")
public String catalogList(
@Param("id")String id,
@Param("filters")String filters ,
@Param("page")Integer page,@Param("rows")Integer rowsCount,
HttpServletRequest request,HttpServletResponse resp)
{
String obj= "[ "+
"{\"id\":1, \"pId\":0, \"name\":\"test1\"},"+
"{\"id\":11, \"pId\":1, \"name\":\"test11\"},"+
"{\"id\":12, \"pId\":1, \"name\":\"test12\"},"+
"{\"id\":111, \"pId\":11, \"name\":\"test111\"}"+
"]";
return obj;
}
分享到：
相关推荐
**zTree资源与使用说明** zTree是一款基于JavaScript的开源树形控件，广泛应用于网页端的数据展示和交互。在Java开发中，zTree能够帮助我们实现数据的层级化展示，比如目录结构、组织架构或者权限管理等。下面将...
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
**zTree控件介绍** zTree是一款非常流行的JavaScript控件，...对于压缩包中的“zTree”文件，可能包含的是zTree的源码、示例代码或者特定版本的资源文件，通过查看这些内容可以深入理解zTree的实现原理和使用方法。
这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源，提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载（Async Loading）是zTree的核心特性之一，它...
**ZTree 使用详解** ZTree 是一款基于 jQuery 的灵活、强大的树形插件，广泛应用于网页界面中的数据展示和操作。这款插件以其丰富的配置选项、完善的API接口以及优秀的性能，深受开发者的喜爱。本教程将详细介绍...
在本案例中，我们将探讨如何在MyEclipse环境中最简单地使用zTree。首先，确保你已安装了MyEclipse集成开发环境，并且熟悉基本的HTML、CSS和JavaScript编程。 1. **引入zTree库** 在项目中，你需要下载zTree的最新...
**zTree 使用说明** zTree 是一款非常流行的 jQuery 插件，主要用于构建可交互的树形数据结构。它在Web应用中广泛应用于目录展示、权限管理、文件系统等场景，以其丰富的功能、良好的性能和易用性受到开发者的喜爱...
本篇文章将详细介绍如何将EasyUI与zTree结合使用，以及这两个库的基本功能。 EasyUI是一款基于jQuery的轻量级前端框架，它提供了一系列预定义的CSS样式和JavaScript组件，如窗口、表格、菜单、对话框等，帮助开发者...
zTree是一款基于jQuery的强大的...总之，zTree是一款强大而灵活的jQuery树形插件，其丰富的功能和简单易用的API使其成为构建树形结构的首选工具。开发者可以通过理解和掌握其原理与用法，轻松实现各种复杂的树形操作。
4. **事件监听与处理**：zTree提供了一系列的事件接口，如`onCheck`，可以在节点被选中或取消选中时执行相应的逻辑。这通常用于收集用户的选择并更新表单值，或者同步到后端数据库。 5. **自定义控件**：zTree的...
提供的`.chm`文件是zTree的官方帮助文档，包含了详细的API介绍、示例代码以及常见问题解答，是学习和使用zTree的重要参考资料。通过阅读此文档，开发者可以更好地理解和运用zTree的各种功能，解决实际开发中遇到的...
1. **Ztree的配置与使用**： Ztree的配置主要涉及JSON数据格式和HTML结构。你需要定义一个`ul`元素作为树的容器，并在JavaScript中设置相应的配置项，例如节点的展开/关闭行为、节点点击事件等。同时，你需要为每个...
ztree是一个广泛使用的JavaScript树形插件，而ztree-select则是其在下拉选择器场景中的延伸应用，尤其适用于需要展示多级分类数据的Web应用。 ztree的基础功能包括但不限于： 1. **层级展示**：ztree可以清晰地...
- `demo`：包含多个演示实例，演示如何使用 zTree 实现各种功能。 总的来说，JQuery zTree v3.4 是一个强大且灵活的树形控件，能够为开发者提供便捷的方式来构建和管理树形数据结构。无论是在后台管理系统还是前端...
1. layui集成：layui的模块化设计使得与其他插件如zTree的集成变得简单。首先，你需要在页面中引入layui的基础库和zTree的js及css文件。 2. zTree初始化：通过JavaScript代码初始化zTree，设置必要的配置项，例如...
7. **集成与兼容性**：ztree是基于jQuery构建的，因此需要在支持jQuery的环境中运行。同时，它兼容多种浏览器，包括IE6+、Firefox、Chrome、Safari等，满足了不同用户的浏览器需求。 总之，ztree是一个强大且灵活的...
五、zTree实例化与使用 首先，引入zTree的CSS和JS文件，然后创建HTML结构，最后初始化zTree： ```html <div id="treeDemo" class="ztree"> $(document).ready(function(){ var zNodes = [ {/*节点数据*/} ]; // ...