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="width: 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);//必须对 路径解码!!!

 

 

posted @ 2012-06-13 17:22  TakeTry  阅读(802)  评论(0编辑  收藏  举报