jqueryFileTree 使用笔记

jquery显示本地文件插件

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对路径进行编码  ，具体是把escape改为encodeURIComponent

 

 

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中