DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax實現無刷新樹
Ajax實現無刷新樹
編輯：AJAX詳解     

1.建立一個ASPx頁面
Html代碼
<html XMLns="http://www.w3.org/1999/xHtml" >
<head id="Head1" runat="server">
    <title>小山</title>
    <link type="text/css" href="../../Styles/tree_css/tree.CSS" rel="stylesheet">
</head>
<body>
    <form id="Form1" runat="server">
    <table width=100% cellpadding=0 cellspacing=0 border=0>
        <colgroup>
            <col width=180 />
            <col />
        </colgroup>
        <tr>
            <td>
                <div class="TreeMenu" id="CategoryTree" style="width: 100%; height: 489px">
                </div>
            </td>
            <td>
                <iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe>
            </td>
        </tr>
    </table>   
                           
            <script language="JScript">
            function el(id)
            {
                return document.getElementById(id);               
            }
            function ExpandSubCategory(iCategoryID)
            {
                var li_father = el("li_" + iCategoryID);
                if (li_father.getElementsByTagName("li").length > 0) //分類已下載
                {
                    ChangeStatus(iCategoryID);
                    return;
                }
               
                li_father.className = "Opened";
               
                switchNote(iCategoryID, true);
                AJaxMethod.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;
                }
          &nbsp;     var li_father = el("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 = "../../Styles/tree_CSS/s.gif";
                       
                        var a = document.createElement("a");
                        var id = dt.Rows[i].CategoryID;
                        a.onmouSEOver = function()
                        {
                            PrevIEwImage(id);
                        };
                        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 = "../../Styles/tree_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);
               
                switchNote(iCategoryID, false);
            }
           
            // 葉子節點的單擊響應函數
            function OpenDocument(iCategoryID)
            {
                // 預加載信息
                PreloadFormUrl(iCategoryID);
            }
           
            function PrevIEwImage(iCategoryID)
            {
               
            }

            function ChangeStatus(iCategoryID)
            {
                var li_father = el("li_" + iCategoryID);
                if (li_father.className == "Closed")
                {
                    li_father.className = "Opened";
                }
                else
                {
              li_father.className = "Closed";
                }               
            }

            function switchNote(iCategoryID, show)
            {
                var li_father = el("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 = "../../Styles/tree_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 = el("ul_note_" + iCategoryID);
                    if (ul)
                    {
                        li_father.removeChild(ul);
                    }               
                }
            }

            // 加載根節點
            var tree = el("CategoryTree");
            var root = document.createElement("li");
            root.id = "li_0";
            tree.appendChild(root);
           
            // 加載頁面時顯示第一級分類
            ExpandSubCategory(0);
           
            function PreloadFormUrl(iCategoryID)
            {
                // 采用同步調用的方式獲取圖片的信息               
                var ds = AJaxMethod.GetFormsList(iCategoryID).value;
                // 如果返回了結果
                if (ds)
                {
                    // 判斷數據表是否不為空
                    if (ds.Tables[0].Rows.length > 0)
                    {
                        // 返回的信息數據表
                        dt = ds.Tables[0];
                        el("furl").src = dt.Rows[0].FormUrl;                                   
                    }
                    else // 分類下沒有
                    {                       
                    }
                }               
            }
            </script>           
    </form>
</body>
</Html>2.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;

public partial class Pages_Home_HomePage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Utility.RegisterTypeForAjax(typeof(AJaxMethod));
    }
}3.建立一個tree.css的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;
    height:600px;
}
4.建立一個類AJaxMethod
using System;
using System.Data;
using System.Data.SqlClIEnt;
using System.Configuration;
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;

/**//// <summary>
/// Summary description for AJaxMethod
/// </summary>
public class AJaxMethod
{}{
    public AJaxMethod()
    {
        //
        // TODO: Add constructor logic here
        //
    }
    [AJaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetSubCategory(int iCategoryID)
    {}{
        string sql = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
        return GetDataSet(sql);
    }

    [AJaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetFormsList(int iCategoryID)
    {}{
        string sql = string.Format("SELECT * FROM forms WHERE form_category_id = {0}", iCategoryID);
        return GetDataSet(sql);
    }
public static string ConnectionString = ConfigurationSettings.APPSettings["ConnectionString"].ToString();

        public static DataSet GetDataSet(string sql)
        {}{
            SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
            DataSet ds = new DataSet();
            sda.Fill(ds);
            if (ds != null)
                return ds;
            else
                return null;
        }
}5.sql腳本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Category]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Category]
GO

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Forms]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Forms]
GO

CREATE TABLE [dbo].[Category] (
    [CategoryID] [int] IDENTITY (1, 1) NOT NULL ,
    [CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
    [FatherID] [int] NULL
) ON [PRIMARY]
GO

CREATE TABLE [dbo].[Forms] (
    [FormID] [int] IDENTITY (1, 1) NOT NULL ,
    [FormName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [FormUrl] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [Form_category_id] [int] NULL ,
    [target] [char] (10) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO
CREATE FUNCTION IsLeaf (@cat_id int) 
RETURNS int AS 
BEGIN

declare @count int
select @count = (select count(*) from Category where FatherID=@cat_id)
if (@count=0)
return 1
return 0

END

AJAX詳解
Prototype框架之$$函數使用指南
$$是prototype框架裡的一個亮點了，也是一種快捷方式，通過它可以根據css樣式選擇頁面中的
Ajax加載圖片
在壇子裡看見一貼子<如何用Javascript顯示二進制數據圖片>看了他們的回復，沒中
MTL 作者 論文 序
Software construction for scientific computing is

相關文章

AJAX基礎知識AJAX詳解
小編推薦
加快軟盤操作速度的匯編程序源代碼 利用AjAX動態變換過濾條件 Ajax模式之緩存控制器模式 Jsp中使用xmlhttp進行數據交互 實現基於Ajax的無限級菜單 Ajax鋪設了更好的開發Web應用道路(圖) XMLHttp 在.Net中的用法 用 PHPRPC 實現 Ajax 安全登錄 利用MS AJAX 擴展服務器端控件 AJAX_ModalPopupExtender
熱門推薦
AJAX及使用E4X編寫Web服務腳本(2) 輕松實現無刷新三級聯動菜單[VS2005與AjaxPro] AJAX技術基礎介紹 利用Ajax實現無限級目錄樹（.NET) ScriptManager 一時興起用Ajax配合JavaScript寫實現自動補全功能的TextBox AJAX編寫用戶注冊實例及技術小結(1) Web Standard Note AJAX技術 vs 傳統的ASP無刷新技術
大家都在看
jquery阻止冒泡事件使用模擬事件實例 js畫花構成心型 用JavaScript腳本實現Web頁面信息交互 Css中的兩個重要概念：塊狀元素和內聯元素 基於CSS3新屬性Animation及transform實現類似翻書效果 淺談JavaScript 函數參數傳遞到底是值傳遞還是引用傳遞 完美實現八種js焦點輪播圖（下篇） 淺談JavaScript字符串拼接
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved