tempad
ReadyGo!技术成就梦想 >>Ajax教程 >> Ajax实现无刷新树

Ajax实现无刷新树

ReadyGo!技术成就梦想 网络搜索 efish 2008-2-24 2:51:26

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;
                if (dt.Rows.length > 0)
                {
                    var iCategoryID = dt.Rows.FatherID;
                }
                var li_father = el("li_" + iCategoryID);
                var ul = document.createElement("ul");
                for (var i = 0;i < dt.Rows.length;i++)
                {
                    if (dt.Rows.IsChild == 1) //叶子节点
                    {
                        var li = document.createElement("li");
                        li.className = "Child";
                        li.id = "li_" + dt.Rows.CategoryID;
                       
                        var img = document.createElement("img");
                        img.id = dt.Rows.CategoryID;
                        img.className = "s";
                        img.src = "../../Styles/tree_css/s.gif";
                       
                        var a = document.createElement("a");
                        var id = dt.Rows.CategoryID;
                        a.onmouseover = function()
                        {
                            PreviewImage(id);
                        };
                        a.href = "javascript:OpenDocument("" + dt.Rows.CategoryID + "");";
                        a.innerHTML = dt.Rows.CategoryName;
                    }
                    else
                    {
                        var li = document.createElement("li");
                        li.className = "Closed";
                        li.id = "li_" + dt.Rows.CategoryID;
                       
                        var img = document.createElement("img");
                        img.id = dt.Rows.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.CategoryID + ");";
                        a.innerHTML = dt.Rows.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.Rows.length > 0)
                    {
                        // 返回的信息数据表
                        dt = ds.Tables;
                        el("furl").src = dt.Rows.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;
}
#Categ

   

[1]  [2]  [3]  上一页  下一页
责任编辑: efish 参与评论 查找更多：
相关文章
Ajax实现在textbox中输入内容，动态从数据库中模糊查… Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
Ajax实现DataGrid/DataList动态ToolTip Ajax实现DataGrid/DataList动态ToolTip
Ajax简单示例之改变下拉框动态生成表格 Ajax简单示例之改变下拉框动态生成表格
AJAX支持的自动填充表单 AJAX支持的自动填充表单
AJAX如何与后台交互 AJAX如何与后台交互
Ajax联动下拉框的实现例子 Ajax联动下拉框的实现例子
利用AJAX技术实现网页无刷新进度条显示 利用AJAX技术实现网页无刷新进度条显示
利用AJAX和ASP.NET实现简单聊天室 利用AJAX和ASP.NET实现简单聊天室
微软的Ajax库客户端Bug总结 微软的Ajax库客户端Bug总结
Ajax程序设计入门 Ajax程序设计入门
2秒记住本站域名

玩过泡泡龙吗？Readygo?Go! 再加上.Com.Cn的后缀，那就是大名小顶的ReadyGo.com.cn

分类导航
ReadyGo!技术成就梦想