Ajax实现无刷新树

晨曦之光 发布于 2012/03/09 15:01
阅读 104
收藏 0

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 > //分类已下载
                {
                    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 > )
                
{
                    
var iCategoryID = dt.Rows[].FatherID;
                }

                
var li_father = el("li_" + iCategoryID);
                
var ul = document.createElement("ul");
                
for (var i = ;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();
            
            
function PreloadFormUrl(iCategoryID)
            
{
                
// 采用同步调用的方式获取图片的信息                
                var ds = AjaxMethod.GetFormsList(iCategoryID).value;
                
// 如果返回了结果
                if (ds)
                
{
                    
// 判断数据表是否不为空
                    if (ds.Tables[].Rows.length > )
                    
{
                        
// 返回的信息数据表
                        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
:;
    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
:;
    padding
:;
    font-size
:18px;
    text-align
:center;
}

p
{
    margin
:;
    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
:;
}

.TreeMenu li
{
    list-style
:none;
    padding
:;
}

.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 = )
return   1
return  

END
6. 源代码下载
 
原文链接: http://blog.csdn.net/21aspnet/article/details/1534279
加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部