jQuery treeview 实现的树组件

     今天利用jQuery的load()函数和treeview函数实现了treeview，而且可以从后台动态读取，配合jquery的layout组件实现了最典型的界面管理模式。

      关于treeviw的用法，主要代码如下：

1、动态获取路径下文件组建树的html代码：

import java.io.File; import java.util.UUID; /** * 遍历web目录下的信息 输出jQuery treeView的html片段 * @author gao_jie * */ public class TreeNavigation { private StringBuffer OutHtml = new StringBuffer();// 输出的Html字段 private File templates = Utils.getTemplatePathHome();// 报表文件根目录 /** * 构造函数 */ public TreeNavigation() { this.getOutHtml(templates); } /** * 获取outHtml片段 * * @return */ public String getOutHtml() { return OutHtml.toString(); } /** * 输出jQuery treeView的html片段 * @param file */ private void getOutHtml(File file) { if (file.isDirectory()) { OutHtml.append("<li class=\"closed\"><span class=\"folder\">" + file.getName() + "</span>"); if (file.listFiles() != null && file.listFiles().length > 0) { OutHtml.append("<ul>"); int i = 0; for (File childFile : file.listFiles()) { getOutHtml(childFile); i++; } OutHtml.append("</ul>"); } OutHtml.append("</li>"); } else { OutHtml .append("<ul><li><a target=\"mainFrame\" href=\"report.jsp?palatename=" + file.getPath() + "&timestamp=" + UUID.randomUUID() + "\"><font color=\"#000000\" style=\"text-decoration: none;white-space :nowrap\">" + "<span class=\"file\">" + file.getName() + "</span></font></a></li></ul>"); } } }

 2、写一个servlet或jsp调用该类产生输出代码：

/** * 页面输出html片段 * @author gao_jie * */ public class InitTreeViewServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8");// 设置编码方式使得url中的汉字能处理 response.setContentType("text/html;charset=utf-8");// 设置参数目的是输出字体含有中文时做相应的处理 PrintWriter out = response.getWriter(); String outhtml = new TreeNavigation().getOutHtml(); out.write(outhtml); } }

 3、页面调用servlet或jsp产生对应的css控制，实现树组件

/** * 初始化页面信息 */ $(document).ready(function () { $.ajaxSetup ({cache: false});//每次重新加载 $("#browser").hide().load("InitTreeView",function(){ $(this).fadeIn(1000);//淡入效果进入 $(this).treeview();//初始化左边导航树 }); }); <!--导航树布局--> <div class="ui-layout-west" style="display: none;"> <ul id="browser" class="filetree"></ul> </div>

 

注意：页面要加入JQuery Treeview的css以及js，附件中是相应的js和css代码。

相关资源：JSP树形菜单(WEBtree)