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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值