心静自然凉~

一杯清茶、二盏淡酒、邀三五知己,诉七八句心语,道九分珍重,怀十分真诚,或伤感、或快乐,无现实之隔阂 、无世俗之势利,如此人生,不亦乐乎!

导航

JQueuy 使用记录---FileTree

Posted on 2009-08-09 18:54  Leo.Zhu  阅读(831)  评论(0编辑  收藏  举报

 

JQuery 的Treeview 后台生成树结构,使用记录:

jquery.treeview.js

1.页面添加对应JQuery的.Js文件和Treeview的.js 文件。

$("#tree").treeview({
        collapsed: true,
                animated: "medium",
                unique: true,
                control:"#sidetreecontrol",
                persist: "location",
        click: function() {
            alert(this);
        }
    });

2.页面加上一个PlaceHolder控件。后台在Page_load的时候,组页面元素。

例如:

plTreeHolder.Controls.Add(new LiteralControl(oBuilder.ToString()));

 

Tree的结构如下:

<ul id="red" class="treeview-red">
<li><span>第1層</span>
    <ul>
        <li><span>第2層</span>
            <ul>
                <li><span>第3層</span>
                <ul>
                    <li><span><a href="?Tel">Item 1.2.0.0</a></span></li>

sample code:

System.Text.StringBuilder oBuilder = new System.Text.StringBuilder();

oBuilder.AppendLine("<ul id=\"tree\" class=\"treeview-gray\">");

AppendFirst(oBuilder);

oBuilder.AppendLine("</ul>");

plTreeHolder.Controls.Add(new LiteralControl(oBuilder.ToString()));

 

 

public void AppendFirst(System.Text.StringBuilder oBuilder)
   {
       try
       {
           WebService service = new WebService();
           DepClass[] list = service.GetFirstDep();
           if (list == null)
           {
               return;
           }
           foreach (DepClass dep in list)
           {
               oBuilder.AppendLine("<li><div class=\"treeview-gray-h1\"> " + dep.ToString() + "</div>");
               oBuilder.AppendLine("<ul>");
               AppendSecond(oBuilder, dep.Pkey);
               //AppendPhone(oBuilder, dep.Pkey,1);
               oBuilder.AppendLine("</ul>");
               oBuilder.AppendLine("</li>");
           }
       }
       catch
       {
       }
   }

 

 

通过上面的方式,可以在页面加载的时候,自动通过后台程式组出tree的格式并在页面上显示。

缺点:当资料少的时候,还可以,但是当资料很大的时候,页面一次性加载好多资料,会使页面速度下降。性能不好,不知道jquery.treeview.js是否可以点一个节点再去获取的功能?我是没找到对应的方法。

 

FileTree使用记录:

这个Jquery插件可以使用ajax的方式,点击节点到后台读取资料,并返回显示Tree。需要调整一下他提供的Sample。如下:

1.页面加一个 <div id="tree" class="demo"></div>  元素

2.在加载页面时,定义该FileTree元素。

$('#tree').fileTree({  script: 'GetTree.aspx' , folderEvent: 'click', multiFolder: false}, function(file) {
                    alert(file);
                });

 

script:定义获取的tree的页面。

multiFolder:false 表示同一层的treenode同时只展开一个。当展开一个另一个已经展开的node收起。

 

3.编辑GetTree.aspx文件。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetTree.aspx.cs" Inherits="GetTree" %>

<%
    string dir;
    if(Request.Form["dir"] == null || Request.Form["dir"].Length <= 0)
        dir = "/";
    else
        dir = Server.UrlDecode(Request.Form["dir"]);
    string dirstr = System.IO.Path.GetDirectoryName(dir);
    System.IO.FileInfo fi = new System.IO.FileInfo(dir);
    System.IO.DirectoryInfo di = fi.Directory;

    if (di == null)   //表示第一层的node的获取。
    {
        System.Text.StringBuilder oBuilder = new StringBuilder();
        WebService serivce = new WebService();
        serivce.AppendFirst(oBuilder); //生成第一层的节点

        Response.Write(oBuilder.ToString());
    }
    else
    {
        if (di.Name.StartsWith("A_"))  //目前使用一共最多3层,所以定义A,B,C的key分别标记要获取哪一层的节点。
        {
            System.Text.StringBuilder oBuilder = new StringBuilder();
            WebService serivce = new WebService();
            serivce.AppendSecond(oBuilder, di.Name.Substring(2));

            Response.Write(oBuilder.ToString());
        }
        else if (di.Name.StartsWith("B_"))
        {
            System.Text.StringBuilder oBuilder = new StringBuilder();
            WebService serivce = new WebService();
            serivce.AppendThird(oBuilder, di.Name.Substring(2));

            Response.Write(oBuilder.ToString());
        }
        else if (di.Name.StartsWith("C_"))
        {
            System.Text.StringBuilder oBuilder = new StringBuilder();
            WebService serivce = new WebService();
            serivce.AppendPhone(oBuilder, di.Name.Substring(2),3);

            Response.Write(oBuilder.ToString());
        }
    }
    //System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(dir);
    //Response.Write("<ul class=\"jqueryFileTree\" style=\"display: none;\">\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>");
%>

 

 

function:

public void AppendFirst(System.Text.StringBuilder oBuilder)
   {
       try
       {
           DepClass[] list = GetFirstDep();
           if (list == null)
           {
               return;
           }
           oBuilder.AppendLine("<ul class=\"jqueryFileTree\" style=\"display: none;\">");

           foreach (DepClass dep in list)
           {
               oBuilder.AppendLine("<li class=\"directory collapsed\"><a class=\"treeview-gray-h1\" href=\"#\" rel=\"\\A_" + dep.Pkey + "/\">" + dep.ToString() + "</a></li>");
           }
           oBuilder.AppendLine("</ul>");
       }
       catch
       {
       }
   }
   public void AppendSecond(StringBuilder oBuilder, string upkey)
   {
       try
       {
           DepClass[] list = GetDep(upkey);
           if (list == null)
           {
               return;
           }
           oBuilder.AppendLine("<ul class=\"jqueryFileTree\" style=\"display: none;\">");

           foreach (DepClass dep in list)
           {
               oBuilder.AppendLine("<li class=\"directory collapsed\"><a class=\"treeview-gray-h2\" href=\"#\" rel=\"\\B_" + dep.Pkey + "/\">" + dep.ToString() + "</a></li>");
           }
           AppendPhone(oBuilder, upkey, 1);
           oBuilder.AppendLine("</ul>");
       }
       catch (System.Exception exp)
       {
       }
   }
   public void AppendThird(StringBuilder oBuilder, string upkey)
   {
       try
       {
           DepClass[] list = GetDep(upkey);
           if (list == null)
           {
               return;
           }
           oBuilder.AppendLine("<ul class=\"jqueryFileTree\" style=\"display: none;\">");

           foreach (DepClass dep in list)
           {
               oBuilder.AppendLine("<li class=\"directory collapsed\"><a class=\"treeview-gray-h3\" href=\"#\" rel=\"\\C_" + dep.Pkey + "/\">" + dep.ToString() + "</a></li>");
           }
           AppendPhone(oBuilder, upkey, 2);

           oBuilder.AppendLine("</ul>");

       }
       catch (System.Exception exp)
       {
       }
   }

 

优点:当资料大的时候,可以每次只获取要显示的节点的数据。页面处理效能很好。