Asp.net jqueryFileTree.js 使用指南

文章的开始，我先介绍一下，自己项目中所遇到的问题，从而在解说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);//必须对路径解码！！！