zoukankan      html  css  js  c++  java
  • JQueuy 使用记录FileTree

    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)
           {
           }
       }

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

     
  • 相关阅读:
    LRu Cache算法原理
    c# 哈希表
    c# 获取二维数组的行数和列数
    Linq
    DataTable使用
    Wpf学习
    数据库配置
    js 数字保留两位小树
    平面数据转换为树形结构
    mysql操作
  • 原文地址:https://www.cnblogs.com/zhucl1006/p/1542362.html
Copyright © 2011-2022 走看看