文章的开始，我先介绍一下，自己项目中所遇到的问题，从而在解说jQueryFileTree.js的使用。
最近在做一个项目中后台需要实现 网站下的文件树状显示，项目中有一相似功能，使用的是jquery.simple.tree.js，
这个jQuery插件很强大，可以实现对节点文件增、删、改操作，如图所示：
如图： jquery.simple.tree.js 实现
想了许久，搞了好些天，网上找答案，都没有解决用此jQuery插件实现，文件夹Tree 效果。
终于知道了一点，相比大家都知道，要想实现此样式，每个节点（node)都需要有一个父节点,从而在从父节点下的到子节点,要实现几乎是不可能的，我不喜欢说不可能，但就是做不出来；在此，如果我想大家谁有兴趣，做出来，别忘了大家一起分享哦~！继续找资料，看到了
jqueryFileTree，然后就资料学习使用。
首先下载插件，在次提供 woradmen 朋友提供的 下载链接：http://download.csdn.net/detail/woradmen/1390277
采用 jqueryFileTree.aspx ，这个文件内容不变。
>>修改过的 静态 index.html
注意： $.ajax({
type: "POST",
url: "../handler.ashx", //获取服务器路径
data: "action=root",
async: false, //必须设为同步才能得到正确的值 ！！！
success: function (data) {
path = data;
}
View Code
1 <html> 2 <head> 3 <link type="text/css" src="jqueryFileTree.css" rel="stylesheet" /> 4 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 6 <script type="text/javascript" src="jqueryFileTree.js"></script> 7 <link href="jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" /> 8 <script type="text/javascript"> 9 $(document).ready(function () { 10 var path; 11 getdata(); //通过同步ajax为 path 赋值 12 13 $('#container').fileTree({ 14 root: path, //要Tree 显示 的服务器 文件夹路径 15 script: 'connectors/jqueryFileTree.aspx', 16 expandSpeed: 1000, //展开速度 17 collapseSpeed: 1000, //合并速度 18 multiFolder: false //是否同时多个文件夹浏览 19 }, function (file) { //单击事件 20 //file 为全路径名 21 var src = $("#ima1").attr("src"); 22 //1. 先判断是否为图片 23 var index = file.lastIndexOf("."); 24 var ext = (file.substr(index)).toLocaleLowerCase(); 25 if (ext == ".jpg" || ext == ".png" || ext == ".bmp" || ext == ".gif") { 26 //2.截取相对路径 27 index = file.indexOf("upload"); 28 file = file.substr(index); 29 $("#ima1").attr("src", file); 30 } 31 else { 32 $("#ima1").attr("src", src); 33 } 34 35 }); 36 function getdata() { 37 $.ajax({ 38 type: "POST", 39 url: "../handler.ashx", //获取服务器路径 40 data: "action=root", 41 async: false, //必须设为同步才能得到正确的值 ！！！ 42 success: function (data) { 43 path = data; 44 } 45 46 }) 47 48 } 49 }); 50 51 52 53 54 </script> 55 </head> 56 <body> 57 <div id="container" style=" 300px; height: 300px;"> 58 </div> 59 <div id="picshow"> 60 <img src="http://images.cnblogs.com/uploadimg_default.jpg" id="ima1" /> 61 </div> 62 </body> 63 </html>
>>handler.ashx 对服务器路径处理请求
注意： string path = context.Server.MapPath("upload/");//必须在 文件夹 后边多加 / ,不然 获得的路径错误！！！
path = path.Replace("\\", "/"); //这里必须对 反斜杠 / 进行替换！！！
View Code
context.Response.ContentType = "text/plain"; string action = context.Request["action"]; if (action=="root") { string path = context.Server.MapPath("upload/");//必须在 文件夹 后边多加 / ,不然 获得的路径错误！！！ path = path.Replace("\\", "/"); //这里必须对 反斜杠 / 进行替换！！！ context.Response.Write(path); }
>>jqueryFileTree.aspx 生成 Tree文件
View Code
string dir; if(Request.Form["dir"] == null || Request.Form["dir"].Length <= 0) dir = "/"; else dir = Request.Form["dir"]; dir = Server.UrlDecode(dir);//必须对 路径解码！！！ System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(dir); Response.Write("<ul class=\"jqueryFileTree\">\n"); foreach (System.IO.DirectoryInfo di_child in di.GetDirectories()) Response.Write("\t<li class=\"directory collapsed\"><a href=\"#\" rel=\"" + dir + di_child.Name + "/\">" + di_child.Name + "</a></li>\n"); foreach (System.IO.FileInfo fi in di.GetFiles()) { string ext = ""; if(fi.Extension.Length > 1) ext = fi.Extension.Substring(1).ToLower(); Response.Write("\t<li class=\"file ext_" + ext + "\"><a href=\"#\" rel=\"" + dir + fi.Name + "\">" + fi.Name + "</a></li>\n"); } Response.Write("</ul>");
注意：dir = Server.UrlDecode(dir);//必须对 路径解码！！！