Ajax实现无刷新树

【 tulaoshi.com - Web开发 】

　　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;
　　                }
　　                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
　　/html2.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