ztree与nutz容易使用 _Web前端

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" 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;
     }