jQuery File Tree使用笔记

jQuery File Tree 需要用到4个文件

分别为
jquery.js (jquery核心库)
jqueryFileTree.js （jqueryFileTree核心库）
jquery.jqueryFileTree.jsp  （在connection文件夹中 用于JavaScript和jsp的连接，添加列表元素等操作）
jqueryFileTree.css

相关问题与解决

1.中文显示问题
官网中下载的connection并不支持中文，需要做一定修改，jsp中把第一行

引用

<%@ page
import="java.io.File,java.io.FilenameFilter,java.util.Arrays"
<%

改为

<%@ page
import="java.io.File,java.io.FilenameFilter,java.util.Arrays" pageEncoding="utf-8"%>
<%

即可

2.中文文件夹无法打开问题
使用附件中的js文件覆盖原来的文件
其中更改了两个地方，避免使用escape对路径进行编码

3.路径问题
必须使用base标签，如下取得当前的url路径

引用

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

再通过base标签设置相对路径的参照值

引用

<base href="<%=basePath%>"/>

4、IE中点击文件夹出现的空行问题（转）

（1）打开css文件“jqueryFileTree.css”

（2）修改“UL.jqueryFileTree LI”css项，在其中添加宽度设置（如：“width:100px;”）。

（3）修改完成后再预览应该就可以了。

5.各文件引用方法

引用

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jqueryFileTree.js"></script>
<link href="js/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />

其中jsp页面位于wedapp中，其他文件在wedapp/js中