欢迎光临
我们一直在努力
当前位置：IDC资讯中心 > 网络编程 > Ajax教程 > 正文

ajax实现无刷新树_ajax教程

2007-08-24 分类：Ajax教程 阅读(2263) 评论(0)
建站超值云服务器，限时71元/月

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>
</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, NIsUserTable) = 1)
drop table [dbo].[Category]
GO


if exists (select * from dbo.sysobjects where id = object_id(N[dbo].[Forms]) and OBJECTPROPERTY(id, NIsUserTable) = 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

赞(0)
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » ajax实现无刷新树_ajax教程
分享到： 更多 (0)

相关推荐

热门标签

ldquo (1370)win (1324)活动 (1166)ios (1162)rdquo (818)微信 (747)iphone (728)小米 (722)windows (706)手机 (698)酷跑 (686)飞车 (540)天天 (492)qq (491)网站 (457)全民 (442)discuz (408)充值 (389)安装 (368)更新 (321)华为 (300)浏览器 (292)支付宝 (289)三星 (266)note (264)教程 (262)预览版 (261)小编 (258)越狱 (254)linux (248)

热门文章

分类目录