ztree与nutz简单使用
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" name="code"> 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" name="code"><!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" name="code"> 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" name="code"> @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; }