Jquery Ztree树型插件总结

最近在使用树型插件的时候知道了ZTree,总体了解了一下，功能非常强大，在此进行总结。 

1.插件的下载和API地址 
官方网站：http://www.ztree.me/v3/main.php#_zTreeInfo 
演示地址：http://www.ztree.me/v3/demo.php 
API：http://www.ztree.me/v3/api.php 


需要引用的类和样式 
jquery.ztree.all-3.4.min.js 
zTreeStyle.css 
jquery-1.4.4.min.js 

2.使用习惯上的总结 
  初始加载，一股我们使用树型插件的时候都习惯给树插件设置一个AJAX获取地址，然后让树插件自己去获取，但是在ZTree中有点不一样，ZTree中的AJAX地址不会在初始加载时生效，而是在有子项的节点才会触发。 



例子1： 
HTML部分 

Html代码  

1. <div id="bxzb" class="ztree"></div><!--记住引用ztree样式-->  

Javascript代码  

1. var setting = {  
2.             isSimpleData: true,  
3.             treeNodeKey: "id",         //设置节点唯一标识属性名称  
4.             treeNodeParentKey: "pId",  //设置节点的父节点唯一标识属性名称  
5.             nameCol: "name",           //设置 zTree 显示节点名称的属性名称,此处默认为Name  
6.             showLine: true,            //在树型中是否显示线条样式  
7.             root: {                    //zTree数据节点的根，全部节点数据都处于 root.nodes 内  
8.                 isRoot: true,  
9.                 nodes: []  
10.             },  
11.             async: {  
12.               enable: true,  
13.               url:"<%=path%>/common/dataInfo/getBmDataDB2.jsp?RETURNTYPE=DFKPI_FOR_ST&TYPE=<%=type%>",   
14.               autoParam:["id","pId","name"]//这里设置在AJAX请求的时候，在请求地址后会自动追加的节点项  
15.             },  
16.             callback:{//设置事件  
17.                 beforeAsync: zTreeOnAsyncSuccess  
18.             },  
19.             view: {//设置字体样式调用方法getFontCss是一个返回样式的方法，具体使用参照API  
20.                 fontCss: getFontCss  
21.             }  
22.         };  
23.           
24.           
25.         $.ajax({//初始化的时候，需要自行获取第一次数据  
26.             async : true,  
27.             cache:false,  
28.             type: 'POST',  
29.             dataType : "json",  
30.             url: "<%=path%>/common/dataInfo/getBmDataDB2.jsp?RETURNTYPE=DFKPI_FOR_ST&TYPE=<%=type%>",//请求的action路径  
31.             error: function () {//请求失败处理函数  
32.                 alert('请求失败');  
33.             },  
34.             success:function(data){ //请求成功后处理函数。  
35.                 //alert(data);  
36.                   
37.                zTree =  $.fn.zTree.init($("#bxzb"), setting, data);  
38.             }  
39.         });  

服务器端的组合JAVA 

Java代码  

1. List<Map<String,Object>> lst = queryQueryUtil.getQueryData(s);//获取需要的数据列  
2.           
3.           
4.         List<String> nodeArray = new ArrayList<String>();  
5.           
6.         nodeArray.add("{ \"id\":0, \"pId\":-1, \"name\":\"指标信息\",\"url\":\"\"}");  
7.           
8.         int index=1;  
9.         for (Map<String,Object> m : lst) {  
10.             nodeArray.add("{ \"id\":"+m.get("id")+", \"pId\":0, \"name\":\""+m.get("text")+"\",\"url\":\"\"}");  
11.         }  
12.           
13.         ret = JSONArray.fromObject(nodeArray).toString();//使用转换工具把对象转换成JSON  

3.其它简便树型插件推荐 
  如果是简要的树应用（不涉及太多的节点选中等操作）推荐使用SimpleTree，这是一个比较老的控件，下载地址已经失效，下载地址见我上传的附件。 

例子： 
需要引用的类和样式 
jquery.simple.tree.js 
simpleTree.css 
jquery-1.4.4.min.js 


重点：SimpleTree主要是通过标签来决定是否有子项如果是用<ul>标签包住然后里面的<li>有相应请求地址的，这种就代表是有子项的，不然就代码已经到子项了。 

HTML部分 

Java代码  

1. <ul class="simpleTree">  
2.         <li class="root" id='0'><span>人员树</span>  
3.             <ul>  
4.                 <li id='GROUP_00'><span>人员</span>  
5.                     <ul class="ajax">  
6.                         <li id='ALL'>{url:wtjlAction!getRyListForAjax.action?userType=1}</li>  
7.                     </ul>  
8.                 </li>  
9.             </ul>  
10.         </li>  
11.     </ul>  

服务器端： 

Java代码  

1. public void getRyListForAjax(){  
2.         HttpServletRequest request = ServletActionContext.getRequest();  
3.         HttpServletResponse response = ServletActionContext.getResponse();   
4.           
5.         RequestParametersUtil rpu = new RequestParametersUtil(request);  
6.           
7.         int userType = rpu.getInteger("userType",1);  
8.           
9.         try {  
10.             ryList = zhManager.getRyList(userType);  
11.               
12.               
13.             StringBuffer str = new StringBuffer();  
14.   
15.             for (TXtRy ry : ryList) {  
16.                 str.append("<li id='" + ry.getJlid() + "' >");  
17.                 str.append(ry.getUserName());  
18.                 str.append("</li>");  
19.             }  
20.   
21.             // response 输出文本信息  
22.             response.setContentType("html/txt");  
23.             response.setCharacterEncoding("utf-8");  
24.             response.setHeader("Pragma", "no-cache");  
25.             response.setHeader("Cache-Control", "no-cache, must-revalidate");  
26.             response.setHeader("Pragma", "no-cache");  
27.             response.getWriter().write(str.toString());  
28.             response.getWriter().flush();  
29.             response.getWriter().close();  
30.         } catch (Exception e) {  
31.             // TODO: handle exception  
32.         }  
33.           
34.     }