DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 利用Ajax實現無限級目錄樹（.NET)
利用Ajax實現無限級目錄樹（.NET)
編輯：AJAX詳解     

使用了AJaxPro框架，感覺還是比較好用。比較符合自己的習慣，整個代碼不難。是利用CSS實現的。
家裡的電腦上不能安裝MS SQL，索性就用MySQL。順路學習了一下使用MySQL的Function。
希望使用的XDJM能在這裡留個言。謝謝

數據庫：
ysql> create table category(
    -> categoryid int,
    -> categoryname varchar(20),
    -> FatherId int);
   
DELIMITER //   
MySQL> create function IsLeaf(cat_id int)
    -> returns int
    -> begin
    -> declare count int;
    -> select count(*) into count from category where fatherid=cat_id;
    -> if count = 0 then
    -> return 1
    -> ;
    -> end if;
    -> return 0;
    -> end;
    -> //
   
MySQL> insert into category values(1,'My Documen
    -> ;
Query OK, 1 row affected (0.08 sec)

MySQL> insert into category values(2,'ASP.Net',1
    -> ;
Query OK, 1 row affected (0.02 sec)

MySQL> insert into category values(3,'Java',1)
    -> ;
Query OK, 1 row affected (0.03 sec)

MySQL> insert into category values(4,'C#',1)
    -> ;
Query OK, 1 row affected (0.04 sec)

MySQL> insert into category values(5,'Html',1)
    -> ;
Query OK, 1 row affected (0.01 sec)

MySQL> insert into category values(6,'Oracle',1)
    -> ;
Query OK, 1 row affected (0.02 sec)

MySQL> insert into category values(7,'Line',1)
    -> ;
Query OK, 1 row affected (0.02 sec)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">

<Html XMLns="http://www.w3.org/1999/xHtml" >
 <head>
  <title>Tree</title>
  <meta name="CODE_LANGUAGE" content="C#" />
  <meta name="vs_defaultClIEntScript" content="JavaScript" />
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/IE5" />
  <link type="text/css" href="css/tree.CSS" rel="stylesheet" />
 </head>
 <body>
  <form id="Form1" method="post" runat="server">
   <div class="TreeMenu" id="CategoryTree">
    <h4>基於AJax的動態樹型菜單</h4>
   </div>
   <div id="docContent" style="">
    <div id="title" align="center"></div>
    
    <div id="author" align="right"></div>
    
    <div id="writetime" align="right"></div>
   </div>
   <div id="docList" style="">
   </div>
   <script language="jscript" type="text/JScript">

   function ExpandSubCategory(iCategoryID)
   {
    var li_father = document.getElementById("li_" + iCategoryID);
    if (li_father.getElementsByTagName("li").length > 0) //分類已下載
    {
     ChangeStatus(iCategoryID);
     displayDocList(iCategoryID);
     return;
    }
    
    li_father.className = "Opened";
    
    switchNote(iCategoryID, true);
    Tree.GetSubCategory(iCategoryID, GetSubCategory_callback);    
   }
   
   function GetSubCategory_callback(response)
   {
    var dt = response.value.Tables[0];
    if (dt.Rows.length > 0)
    {
     var iCategoryID = dt.Rows[0].FatherID;
    }
    
    var li_father = document.getElementById("li_" + iCategoryID);
    var ul = document.createElement("ul");
    for (var i = 0;i < dt.Rows.length;i++)
    {
     if (dt.Rows[i].IsChild == 1) //葉子節點
     {
      var li = document.createElement("li");
      li.className = "Child";
      li.id = "li_" + dt.Rows[i].CategoryID;
      
      var img = document.createElement("img");
      img.id = dt.Rows[i].CategoryID;
      img.className = "s";
      img.src = "CSS/s.gif";
      
      var a = document.createElement("a");
      a.href = "Javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
      a.innerHtml = dt.Rows[i].CategoryName;
     }
     else
     {
      var li = document.createElement("li");
      li.className = "Closed";
      li.id = "li_" + dt.Rows[i].CategoryID;
      
      var img = document.createElement("img");
      img.id = dt.Rows[i].CategoryID;
      img.className = "s";
      img.src = "CSS/s.gif";
      img.onclick = function () {
       ExpandSubCategory(this.id);
      };
      img.alt = "展開/折疊";
      
      var a = document.createElement("a");
      a.href = "Javascript:ExpandSubCategory(" +
       dt.Rows[i].CategoryID + ");";
      a.innerHtml = dt.Rows[i].CategoryName;
     }
     li.appendChild(img);
     li.appendChild(a);
     ul.appendChild(li); 
    }
    li_father.appendChild(ul);
    
    displayDocList(iCategoryID);
    switchNote(iCategoryID, false);
   }
   
   function OpenDocument(iCategoryID)
   {
    var div_docContent = document.getElementById("docContent");
    var div_docList = document.getElementById("docList");
    
    div_docContent.style.display = "";
    div_docList.style.display = "none";
    
    Tree.GetDocInfo(iCategoryID, GetDocInfo_callback);
   }
   
   function GetDocInfo_callback(response)
   {
   }
   
   function ChangeStatus(iCategoryID)
   {
    var li_father = document.getElementById("li_" + iCategoryID);
    if (li_father.className == "Closed")
    {
     li_father.className = "Opened";
    }
    else
    {
     li_father.className = "Closed";
    }    
   }
   
   function switchNote(iCategoryID, show)
   {
    var li_father = document.getElementById("li_" + iCategoryID);
    if (show)
    {
     var ul = document.createElement("ul");
     ul.id = "ul_note_" + iCategoryID;
     
     var note = document.createElement("li");
     note.className = "Child";
     
     var img = document.createElement("img");
     img.className = "s";
     img.src = "CSS/s.gif";
     
     var a = document.createElement("a");
     a.href = "Javascript:void(0);";
     a.innerHtml = "請稍候...";
     
     note.appendChild(img);
     note.appendChild(a);
     ul.appendChild(note);
     li_father.appendChild(ul);
    }
    else
    {
     var ul = document.getElementById("ul_note_" + iCategoryID);
     if (ul)
     {
      li_father.removeChild(ul);
     }    
    }
   }
   
   function displayDocList(iCategoryID)
   {    
    var div_docContent = document.getElementById("docContent");
    var div_docList = document.getElementById("docList");
    
    div_docContent.style.display = "none";
    div_docList.style.display = "";
    div_docList.style.padding = 20;
    while (div_docList.childNodes.length > 0)
    {
     div_docList.removeChild(div_docList.childNodes[0]);
    }
    
    var dt = Tree.GetDocInfoInCategory(iCategoryID).value.Tables[0];
    if (dt)
    {
     for (var i = 0;i < dt.Rows.length;i++)
     {
      var a = document.createElement("a");
      a.href = "Javascript:OpenDocument(" + dt.Rows[i].CategoryID + ");";
      a.innerHtml = "<font color=#1122aa size=2>" + dt.Rows[i].CategoryName + "</font>";
      
      var li = document.createElement("li");
      li.appendChild(a);
      
      var div = document.createElement("div");
      div.appendChild(li);
      
      div_docList.appendChild(div);
     }
    }
   }   
   
   // 加載根節點
   var tree = document.getElementById("CategoryTree");
   var root = document.createElement("li");
   root.id = "li_0";
   tree.appendChild(root);
   
   // 加載頁面時顯示第一級分類
   ExpandSubCategory(0);
   </script>

  </form>
 </body>

</Html>

Tree.ASPx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AJaxPro;
using MySql.Data.MySQLClIEnt;
public partial class Tree : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Utility.RegisterTypeForAJax(typeof(Tree));
    }

    private Random rand = new Random();

    [AJaxMethod()]
    public DataSet GetSubCategory(int iCategoryID)
    {
        DataSet ds = new DataSet();

        MySqlConnection conn = new MySQLConnection("server=127.0.0.1;uid=root;pwd=111111;database=test");
        MySQLCommand cmd = conn.CreateCommand();
        cmd.CommandText = string.Format("SELECT CategoryID, CategoryName, FatherID, IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
        MySqlDataAdapter da = new MySQLDataAdapter(cmd);

        try
        {
            da.Fill(ds);
        }
        catch (MySQLException)
        {
        }
        finally
        {
            conn.Close();
        }

        System.Threading.Thread.Sleep(500 + rand.Next(1000));
        Console.WriteLine(ds.Tables[0].Rows.Count.ToString());
        return ds;
    }

    [AJaxMethod()]
    public DataSet GetDocInfo(int iCategoryID)
    {
        DataSet ds = new DataSet();
        return ds;
    }

    [AJaxMethod()]
    public DataSet GetDocInfoInCategory(int iCategoryID)
    {
        DataSet ds = new DataSet();

        MySqlConnection conn = new MySQLConnection("server=127.0.0.1;uid=root;pwd=111111;database=test");
        MySQLCommand cmd = conn.CreateCommand();
        cmd.CommandText = string.Format(
            "SELECT CategoryID, CategoryName, FatherID FROM Category WHERE FatherID = {0} AND IsLeaf(CategoryID) = 1", iCategoryID);
        MySqlDataAdapter da = new MySQLDataAdapter(cmd);

        try
        {
            da.Fill(ds);
        }
        catch (MySQLException)
        {
        }
        finally
        {
            conn.Close();
        }

        return ds;
    }
}

CSS
a
{
 text-decoration:none;
}
a,a:visited
{
 color:#000;
 background:inherit;
}
body
{
 margin:0;
 padding:20px;
 font:12px tahoma,宋體,sans-serif;
}
dt
{
 font-size:22px;
 font-weight:bold;
 margin:0 0 0 15px;
}
dd
{
 margin:0 0 0 15px;
}
h4
{
 margin:0;
 padding:0;
 font-size:18px;
 text-align:center;
}
p
{
 margin:0;
 padding:0 0 0 18px;
}
p a,p a:visited
{
 color:#00f;
 background:inherit;
}

.TreeMenu img.s
{
 cursor:hand;
 vertical-align:middle;
}
.TreeMenu ul
{
 padding:0;
}
.TreeMenu li
{
 list-style:none;
 padding:0;
}
.Closed ul
{
 display:none;
}
.Child img.s
{
 background:none;
 cursor:default;
}

#CategoryTree ul
{
 margin:0 0 0 17px;
}
#CategoryTree img.s
{
 width:34px;
 height:18px;
}
#CategoryTree .Opened img.s
{
 background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{
 background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{
 background:url(skin3/child.gif) no-repeat 13px 2px;
}

#CategoryTree
{
 float:left;
 width:249px;
 border:1px solid #99BEEF;
 background:#D2E4FC;
 color:inherit;
 margin:3px;
 padding:3px;
}


AJAX詳解
TheformatforJavascriptdoccommentsinVisualStudio2008
概述函數是進行模塊化程序設計的基礎，編寫復雜的AJax應用程序，必須對函數有更深入的了解。Java
設計模式PHP5實現之----觀察者（Observer）
<?PHP/*** 觀察者模式** 觀察者模式定義了一個一對多的依賴關系* 讓一個或多個觀察
整理一些很有用的jquery論壇帖子
一些很有用的jquery論壇帖子，還有一些常見問題，相信對使用jquery的朋友都會有幫助。期待大

相關文章

AJAX基礎知識AJAX詳解
小編推薦
asp中利用xmlhttp實現遠程管理數據庫 Windows server 2003設置使用必備技巧集 ajax強制不緩存的方法 AJAX+JSF組件實現高性能的文件上載(2) jQuery入門之(3)－事件 ajax應用中readyState的五種狀態說明 從用戶體驗與編程模型方面看AJAX與B/S XMLHTTPRequest對象的標准操作說明 如何使用ASP.NET AJAX訪問Web Services 非常出色的jQuery運動特效可以和Flash媲美
熱門推薦
利用MS AJAX 擴展服務器端控件 Ajax內部交流文檔 提高linux的連接限制 學好VC++的十大良好習慣1 自己寫的一個PHP上傳類 PHP中JSON的應用 ajax解析XML文檔 AJAX Hacks 之HACK3. 使用獨立的文件來取得http request jQuery框架實例代碼分析
大家都在看
JS+CSS設置img在DIV中只顯示Img垂直居中的部分 .NET使XML串行化易如反掌 JS訪問SWF的函數用法實例 javascript截取字符串小結 超強解析XML——簡單直接的來 在iframe框架中打開頁面的方法 猜測和經驗數據作為設計原則的基礎 CSS兼容：如何兼容IE7和IE8揭秘
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved