今天利用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()
+ "×tamp="
+ 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代码。