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代码。