ztree与nutz容易使用

2012-10-07

ztree与nutz简单使用1.说明ztree是一个jquery插件，树形UI.功能较强大，API手册做得很不错。其自带演示很强大

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

热点排行

Web前端

ztree与nutz容易使用