`
yunhaifeiwu
  • 浏览: 161336 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

ztree与nutz简单使用

    博客分类：
  • nutz
MobilejQuery三星Nokia音乐 
阅读更多
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;
     }

分享到：
| 程伊琳（同事之女）其他
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics