jquery.treeview使用笔记

这几天项目中要用到树型结构，正好项目中用到了JQuery,所以就在网上找依赖JQuery的JS树，最终选择了jquery.treeview.js,原因之一,它是JQuery官方发布的JS库，另一方面，看了一下它的文档，使用起来也是很简单的。经过一个小时的研究，终于搞定，现把它的使用方法做个简要的说明，以做笔记。

        要使用jquery.treeview.js，当然第一步是要把它下载下来，放入自己的工程中，然后在页面文件中引进jquery.js,jquery.cookie.js,jquery.treeview.js,jquery.treeview.async.js四个库文件，其中最后一个是要使用异步加载结点的时候，要用到的，我的项目中已经用到了这个功能，在初始化树的时候，只加载顶层的数据，当点击顶层结点的时候，才会去加载下一层的结点，所有的数据都是通过ajax去后台取得到数据。

        将库文件引入后，下一步就是要定义一个列表UL:如这样：

Html代码  

1. <ul id="categorys"></ul>  

 

 树数据将会加载到这个UL里面

Js代码  

1. <script type="text/javascript">  
2.  $(document).ready(function(){  
3.   $("#categorys").treeview({  
4.    url: "category!ajaxTreeView"  
5.   });  
6.  });  
7. </script>  

 

这里面的意思就是当文档加载完成后，向后台CategoryAction获取数据，注意后台输出的数据必须是json格式的数据。

 下一步就是后台CategoryAction的数据输出部分了：

Java代码  

1. response.setHeader("Cache-Control", "no-cache");  
2. response.setContentType("text/json;charset=UTF-8");  
3. try {  
4.  request.setCharacterEncoding("utf-8");  
5. } catch (UnsupportedEncodingException e1) {  
6.  e1.printStackTrace();  
7. }  

 

 要将contenttype设置为"text/json"，第一次加载初始数据的时候，会向这个CategoryAction传递一个get参数：root=source,所以后台可以判断root参数是否是source,如果是source,则代表是第一次加载数据，如果不是source,则root参数传递的則是树结点的id.
 
 数据格式如下：

Json代码  

1. [  
2.  {  
3.   "text": "1. Pre Lunch (120 min)",  
4.   "expanded": true,  
5.   "classes": "important",  
6.   "children":  
7.   [  
8.    {  
9.     "text": "1.1 The State of the Powerdome (30 min)"  
10.    },  
11.     {  
12.     "text": "1.2 The Future of jQuery (30 min)"  
13.    },  
14.     {  
15.     "text": "1.2 jQuery UI - A step to richnessy (60 min)"  
16.    }  
17.   ]  
18.  },  
19.  {  
20.   "text": "2. Lunch  (60 min)"  
21.  },  
22.  {  
23.   "text": "3. After Lunch  (120+ min)",  
24.   "children":  
25.   [  
26.    {  
27.     "text": "3.1 jQuery Calendar Success Story (20 min)"  
28.    },  
29.     {  
30.     "text": "3.2 jQuery and Ruby Web Frameworks (20 min)"  
31.    },  
32.     {  
33.     "text": "3.3 Hey, I Can Do That! (20 min)"  
34.    },  
35.     {  
36.     "text": "3.4 Taconite and Form (20 min)"  
37.    },  
38.     {  
39.     "text": "3.5 Server-side JavaScript with jQuery and AOLserver (20 min)"  
40.    },  
41.     {  
42.     "text": "3.6 The Onion: How to add features without adding features (20 min)",  
43.     "id": "36",  
44.     "hasChildren": true  
45.    },  
46.     {  
47.     "text": "3.7 Visualizations with JavaScript and Canvas (20 min)"  
48.    },  
49.     {  
50.     "text": "3.8 ActiveDOM (20 min)"  
51.    },  
52.     {  
53.     "text": "3.8 Growing jQuery (20 min)"  
54.    }  
55.   ]  
56.  }  
57. ]  

 

 

格式说明：上面的1. Pre Lunch (120 min) 结点中："expanded": true 代表这个结点下的child是展开的，children则是子结点的数据，节点3. After Lunch  (120+ min)有8个子结点，其中子结点中有一个结点3.6 The Onion: How to add features without adding features (20 min)，有一个id属性，同时hasChildren:true,表示其下面又有子结点，并且会向FetchProductTypeServlet传递参数为：root=id值，具体到这里就是root=36,那么点击这个结点的时候，后台就会接收到root=36这个值，然后我们就在具体应用中，通过数据库查询或者其它方式找到相对应的数据，然后将这些数据构造成treeview所需要的json数据，也即是上面所示格式的数据。

 

 

后台CategoryAction代码如下：

Java代码  

1. public String ajaxTreeView(){  
2.     Struts2Utils.renderText(categoryHelper.generateJTVJsonString());  
3.     return null;  
4. }  

 

CategoryHelper代码如下：

Java代码  

1. package com.prl.action.admin.helper;  
2.   
3. import java.util.List;  
4.   
5. import javax.servlet.http.HttpServletRequest;  
6.   
7. import org.apache.commons.logging.Log;  
8. import org.apache.commons.logging.LogFactory;  
9. import org.springframework.beans.factory.annotation.Autowired;  
10. import org.springframework.stereotype.Repository;  
11. import org.springside.modules.web.struts2.Struts2Utils;  
12.   
13. import com.prl.entity.Category;  
14. import com.prl.service.CategoryManager;  
15. import com.prl.service.jdbc.CategoryJdbcUtil;  
16.   
17. @Repository  
18. public class CategoryHelper {  
19.     private static final Log log = LogFactory.getLog(CategoryHelper.class);  
20.     @Autowired  
21.     public CategoryManager categoryManager;  
22.     @Autowired  
23.     public CategoryJdbcUtil categoryJdbcUtil;  
24.   
25.     // ========================= 产生jquery.treeview的jsonstring=================//  
26.     public String generateJTVJsonString() {  
27.         log.info("generateJTVJsonString start .....");  
28.         HttpServletRequest request = Struts2Utils.getRequest();  
29.         String id = request.getParameter("root");  
30.         log.info("id:"+id);  
31.         String output = "";  
32.         if (id == null) {  
33.             return "";  
34.         } else if (id.equalsIgnoreCase("source")) {  
35.             output = generateInitTreeString();  
36.         } else {  
37.             output = generateTreeChildNodeString(Long.parseLong(id));  
38.         }  
39.         log.info("generateJTVJsonString end,return:"+output);  
40.         return output;  
41.     }  
42.   
43.     // 产生子节点jsonstring  
44.     private String generateTreeChildNodeString(Long categoryId) {  
45.         StringBuilder jsonString = new StringBuilder();  
46.         jsonString.append("[");  
47.   
48.         List<Category> categorys = categoryManager  
49.                 .findChildrenCategory(categoryId);  
50.         if (categorys.isEmpty())  
51.             return "";  
52.         int i = 0;  
53.         for (Category category : categorys) {  
54.             if (i > 0) {  
55.                 jsonString.append(",");  
56.             }  
57.             jsonString.append(toJSONString(category));  
58.             i++;  
59.         }  
60.   
61.         jsonString.append("]");  
62.         return jsonString.toString();  
63.     }  
64.   
65.     private String toJSONString(Category category) {  
66.         StringBuilder sb = new StringBuilder();  
67.         sb.append(" {");  
68.         sb.append("  \"text\": \"" + generateLinkString(category) + "\"");  
69.   
70.         if (categoryJdbcUtil.hasChild(category)) {  
71.             sb.append(",  \"id\":\"" + category.getCatId() + "\"");  
72.             sb.append(",  \"hasChildren\":true");  
73.         }  
74.         sb.append(" }");  
75.         return sb.toString();  
76.     }  
77.   
78.     private String generateLinkString(Category category) {  
79.         String link = "<a href='javascript:on_cat_click("+category.getCatId()+");' >" + category.getCatName() + "</a>";  
80.         //link = category.getCatName();  
81.         return link;  
82.     }  
83.   
84.     private String generateInitTreeString() {  
85.         StringBuilder jsonString = new StringBuilder();  
86.         jsonString.append("[");  
87.   
88.         List<Category> categorys = categoryManager.getRoot();  
89.         int i = 0;  
90.         for (Category category : categorys) {  
91.             if (i > 0) {  
92.                 jsonString.append(",");  
93.             }  
94.             jsonString.append(toJSONString(category));  
95.             i++;  
96.         }  
97.   
98.         jsonString.append("]");  
99.         return jsonString.toString();  
100.     }  
101.     // ==================== 产生jquery.treeview的jsonstring 结束=================//  
102. }  

 

 

写完收功，希望能帮到正在使用这个treeview的朋友点小忙，自己以后再使用的时候，也可以再翻看一下这篇笔记，不至于搞忘记用法了。