这几天项目中要用到树型结构,正好项目中用到了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:如这样:
<ul id="categorys"></ul>
树数据将会加载到这个UL里面
- <script type="text/javascript">
- $(document).ready(function(){
- $("#categorys").treeview({
- url: "category!ajaxTreeView"
- });
- });
- </script>
<script type="text/javascript"> $(document).ready(function(){ $("#categorys").treeview({ url: "category!ajaxTreeView" }); }); </script>
这里面的意思就是当文档加载完成后,向后台CategoryAction获取数据,注意后台输出的数据必须是json格式的数据。
下一步就是后台CategoryAction的数据输出部分了:
- response.setHeader("Cache-Control", "no-cache");
- response.setContentType("text/json;charset=UTF-8");
- try {
- request.setCharacterEncoding("utf-8");
- } catch (UnsupportedEncodingException e1) {
- e1.printStackTrace();
- }
response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/json;charset=UTF-8"); try { request.setCharacterEncoding("utf-8"); } catch (UnsupportedEncodingException e1) { e1.printStackTrace(); }
要将contenttype设置为"text/json",第一次加载初始数据的时候,会向这个CategoryAction传递一个 get参数:root=source,所以后台可以判断root参数是否是source,如果是source,则代表是第一次加载数据,如果不是 source,则root参数传递的則是树结点的id.
数据格式如下:
- [
- {
- "text": "1. Pre Lunch (120 min)",
- "expanded": true,
- "classes": "important",
- "children":
- [
- {
- "text": "1.1 The State of the Powerdome (30 min)"
- },
- {
- "text": "1.2 The Future of jQuery (30 min)"
- },
- {
- "text": "1.2 jQuery UI - A step to richnessy (60 min)"
- }
- ]
- },
- {
- "text": "2. Lunch (60 min)"
- },
- {
- "text": "3. After Lunch (120+ min)",
- "children":
- [
- {
- "text": "3.1 jQuery Calendar Success Story (20 min)"
- },
- {
- "text": "3.2 jQuery and Ruby Web Frameworks (20 min)"
- },
- {
- "text": "3.3 Hey, I Can Do That! (20 min)"
- },
- {
- "text": "3.4 Taconite and Form (20 min)"
- },
- {
- "text": "3.5 Server-side JavaScript with jQuery and AOLserver (20 min)"
- },
- {
- "text": "3.6 The Onion: How to add features without adding features (20 min)",
- "id": "36",
- "hasChildren": true
- },
- {
- "text": "3.7 Visualizations with JavaScript and Canvas (20 min)"
- },
- {
- "text": "3.8 ActiveDOM (20 min)"
- },
- {
- "text": "3.8 Growing jQuery (20 min)"
- }
- ]
- }
- ]
[ { "text": "1. Pre Lunch (120 min)", "expanded": true, "classes": "important", "children": [ { "text": "1.1 The State of the Powerdome (30 min)" }, { "text": "1.2 The Future of jQuery (30 min)" }, { "text": "1.2 jQuery UI - A step to richnessy (60 min)" } ] }, { "text": "2. Lunch (60 min)" }, { "text": "3. After Lunch (120+ min)", "children": [ { "text": "3.1 jQuery Calendar Success Story (20 min)" }, { "text": "3.2 jQuery and Ruby Web Frameworks (20 min)" }, { "text": "3.3 Hey, I Can Do That! (20 min)" }, { "text": "3.4 Taconite and Form (20 min)" }, { "text": "3.5 Server-side JavaScript with jQuery and AOLserver (20 min)" }, { "text": "3.6 The Onion: How to add features without adding features (20 min)", "id": "36", "hasChildren": true }, { "text": "3.7 Visualizations with JavaScript and Canvas (20 min)" }, { "text": "3.8 ActiveDOM (20 min)" }, { "text": "3.8 Growing jQuery (20 min)" } ] } ]
格式说明:上面的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代码如下:
- public String ajaxTreeView(){
- Struts2Utils.renderText(categoryHelper.generateJTVJsonString());
- return null;
- }
public String ajaxTreeView(){ Struts2Utils.renderText(categoryHelper.generateJTVJsonString()); return null; }
CategoryHelper代码如下:
- package com.prl.action.admin.helper;
- import java.util.List;
- import javax.servlet.http.HttpServletRequest;
- import org.apache.commons.logging.Log;
- import org.apache.commons.logging.LogFactory;
- import org.springframework.beans.factory.annotation.Autowired;
- import org.springframework.stereotype.Repository;
- import org.springside.modules.web.struts2.Struts2Utils;
- import com.prl.entity.Category;
- import com.prl.service.CategoryManager;
- import com.prl.service.jdbc.CategoryJdbcUtil;
- @Repository
- public class CategoryHelper {
- private static final Log log = LogFactory.getLog(CategoryHelper.class);
- @Autowired
- public CategoryManager categoryManager;
- @Autowired
- public CategoryJdbcUtil categoryJdbcUtil;
- // ========================= 产生jquery.treeview的jsonstring=================//
- public String generateJTVJsonString() {
- log.info("generateJTVJsonString start .....");
- HttpServletRequest request = Struts2Utils.getRequest();
- String id = request.getParameter("root");
- log.info("id:"+id);
- String output = "";
- if (id == null) {
- return "";
- } else if (id.equalsIgnoreCase("source")) {
- output = generateInitTreeString();
- } else {
- output = generateTreeChildNodeString(Long.parseLong(id));
- }
- log.info("generateJTVJsonString end,return:"+output);
- return output;
- }
- // 产生子节点jsonstring
- private String generateTreeChildNodeString(Long categoryId) {
- StringBuilder jsonString = new StringBuilder();
- jsonString.append("[");
- List<Category> categorys = categoryManager
- .findChildrenCategory(categoryId);
- if (categorys.isEmpty())
- return "";
- int i = 0;
- for (Category category : categorys) {
- if (i > 0) {
- jsonString.append(",");
- }
- jsonString.append(toJSONString(category));
- i++;
- }
- jsonString.append("]");
- return jsonString.toString();
- }
- private String toJSONString(Category category) {
- StringBuilder sb = new StringBuilder();
- sb.append(" {");
- sb.append(" \"text\": \"" + generateLinkString(category) + "\"");
- if (categoryJdbcUtil.hasChild(category)) {
- sb.append(", \"id\":\"" + category.getCatId() + "\"");
- sb.append(", \"hasChildren\":true");
- }
- sb.append(" }");
- return sb.toString();
- }
- private String generateLinkString(Category category) {
- String link = "<a href='javascript:on_cat_click("+category.getCatId()+");' >" + category.getCatName() + "</a>";
- //link = category.getCatName();
- return link;
- }
- private String generateInitTreeString() {
- StringBuilder jsonString = new StringBuilder();
- jsonString.append("[");
- List<Category> categorys = categoryManager.getRoot();
- int i = 0;
- for (Category category : categorys) {
- if (i > 0) {
- jsonString.append(",");
- }
- jsonString.append(toJSONString(category));
- i++;
- }
- jsonString.append("]");
- return jsonString.toString();
- }
- // ==================== 产生jquery.treeview的jsonstring 结束=================//
- }
package com.prl.action.admin.helper; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import org.springside.modules.web.struts2.Struts2Utils; import com.prl.entity.Category; import com.prl.service.CategoryManager; import com.prl.service.jdbc.CategoryJdbcUtil; @Repository public class CategoryHelper { private static final Log log = LogFactory.getLog(CategoryHelper.class); @Autowired public CategoryManager categoryManager; @Autowired public CategoryJdbcUtil categoryJdbcUtil; // ========================= 产生jquery.treeview的jsonstring=================// public String generateJTVJsonString() { log.info("generateJTVJsonString start ....."); HttpServletRequest request = Struts2Utils.getRequest(); String id = request.getParameter("root"); log.info("id:"+id); String output = ""; if (id == null) { return ""; } else if (id.equalsIgnoreCase("source")) { output = generateInitTreeString(); } else { output = generateTreeChildNodeString(Long.parseLong(id)); } log.info("generateJTVJsonString end,return:"+output); return output; } // 产生子节点jsonstring private String generateTreeChildNodeString(Long categoryId) { StringBuilder jsonString = new StringBuilder(); jsonString.append("["); List<Category> categorys = categoryManager .findChildrenCategory(categoryId); if (categorys.isEmpty()) return ""; int i = 0; for (Category category : categorys) { if (i > 0) { jsonString.append(","); } jsonString.append(toJSONString(category)); i++; } jsonString.append("]"); return jsonString.toString(); } private String toJSONString(Category category) { StringBuilder sb = new StringBuilder(); sb.append(" {"); sb.append(" \"text\": \"" + generateLinkString(category) + "\""); if (categoryJdbcUtil.hasChild(category)) { sb.append(", \"id\":\"" + category.getCatId() + "\""); sb.append(", \"hasChildren\":true"); } sb.append(" }"); return sb.toString(); } private String generateLinkString(Category category) { String link = "<a href='javascript:on_cat_click("+category.getCatId()+");' >" + category.getCatName() + "</a>"; //link = category.getCatName(); return link; } private String generateInitTreeString() { StringBuilder jsonString = new StringBuilder(); jsonString.append("["); List<Category> categorys = categoryManager.getRoot(); int i = 0; for (Category category : categorys) { if (i > 0) { jsonString.append(","); } jsonString.append(toJSONString(category)); i++; } jsonString.append("]"); return jsonString.toString(); } // ==================== 产生jquery.treeview的jsonstring 结束=================// }
写完收功,希望能帮到正在使用这个treeview的朋友点小忙,自己以后再使用的时候,也可以再翻看一下这篇笔记,不至于搞忘记用法了。
发表评论
-
nginx代理IIS轻松实现支持JSP,PHP,ASP平台
2012-05-12 21:16 1556通过使用高效代理服务器nginx代理IIS轻松实现支持JSP, ... -
OpenSessionInViewFilter的使用
2011-06-22 11:34 701一、作用 Spring为我们解决Hibernate的Sess ... -
tomcat服务器使用url rewrite1
2011-05-19 18:25 1425让tomcat服务器使用url rewrite1. 第 ... -
CountDownLatch闭锁详解
2011-05-09 10:29 1272闭锁(Latch) 闭锁(Latch):一种同步方法,可以延 ... -
memcache/memcached/memcachedb 配置、安装
2011-05-05 15:44 1159memcache/memcached/memcachedb ... -
集群的可扩展性及其分布式体系结构
2011-03-17 14:54 1067常见的平衡算法 一般 ... -
strust2防止重复提交
2011-03-15 10:05 1072在请求表单中添加<s:token></s:t ... -
源码中没有任何错误目录中还存在红叉
2011-02-26 17:04 734查看.classpath文件。修改正确配置!lib与src -
长连接与短连接
2011-01-04 15:44 1085长连接与短连接 所谓长连接,指在一个TCP连接上可以连续发送 ... -
带“+”号的参数值通过url传递,后台取不到正确值
2010-11-29 15:19 2411带“+”号的参数值通过url传递,后台取不到正确值 问题是这样 ... -
JCom的使用
2010-11-08 11:15 2678JCom可以支持打印,支持生成word,生成Excel,并且可 ... -
利用java操作Excel文件
2010-10-28 16:45 703利用java操作Excel文件 很久以来都想 ... -
XSL将XML转换成HTML文件 js方法
2010-10-22 14:34 2972JavaScript解决方案XSL是如何将XML转换成HTML ... -
web.xml详解
2010-10-22 09:18 625部署描述符实际上是一个XML文件,包含了很多描述servlet ... -
jsvalidation表单验证框架使用相关问题
2010-10-05 18:57 10921、如果验证框架没有起作用,就先把验证框架的js文件、x ... -
java中调用c(c++)写的dll 文件的实现及步骤
2010-09-08 10:08 1674JNI使用技巧点滴本文为 ... -
我的站点
2010-01-09 10:43 0www.51sj.com 我要设计 www.52sj.co ... -
Oracle创建删除用户、角色、表空间、导入导出数据库命令行方式总结
2009-12-18 21:31 2303说明: 在创建数据库时输入的密码,是修改系统默认的密码,以sy ... -
jdbc连接各种数据库
2009-12-18 21:08 783一、jsp连接Oracle8/8i/9i数据库(用thin模式 ... -
IOC
2009-11-02 11:36 1160介绍 IOC 作者:冰云 icecloud(AT) ...
相关推荐
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jquery.treeview,做一个资源备份
jquery.treeview.js树控件的应用
jquery.treeview.zipjquery.treeview.zip
jquery.treeview .js demo(转)
欢迎大家下载使用 并提出宝贵意见............
NULL 博文链接:https://firezhfox.iteye.com/blog/1735456
jquery-treeview.js 是一个免费开源的jQuery目录树插件,它可用于MVC开发,关于asp.net mvc 的使用,请参照《MVC引用教程》,docx格式的图文教程
jquery.treeview用到的包,包括CSS文件及JS文件,可以做成相当漂亮的树。
jquery treeview demo
Jquery.Treeview+Jquery UI制作Web文件预览 http://blog.csdn.net/a497785609/article/details/19284137
先上图: jquery.treeview 数据通过JSON...(jquery.treeview.min.js 树插件 和 jquery.contextmenu.r2.js 右键菜单插件) 在线演示 http://demo.jb51.net/js/jQuery.Treeview/demo.html打包下载 jQuery_Treeview.rar
我建议在使用 jquery.treeview 之前阅读 jquery.observable 的手册。入门让我们用 2 个根节点创建一个简单的树视图,没有别的: [removed]// we create on observable data structurevar model = $.observable({...
jQuery treeview树形结构应用 ... jquery.treeview.css 引入必备js jquery-3.0.0.js jquery.treeview.js 编写页面treeview_jQuery.html <!DOCTYPE html> <html lang="en"> <head>
使用java + servlet实现jquery treeview async动态加载树菜单