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" >
functionel(id)
{
returndocument.getElementById(id);
}
functionExpandSubCategory(iCategoryID)
{
varli_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);
}

functionGetSubCategory_callback(response)
{
vardt=response.value.Tables[0];
if(dt.Rows.length>0)
{
variCategoryID=dt.Rows[0].FatherID;
}
varli_father=el("li_"+iCategoryID);
varul=document.createElement("ul");
for(vari=0;i<dt.Rows.length;i++)
{
if(dt.Rows[i].IsChild==1)//叶子节点
{
varli=document.createElement("li");
li.className="Child";
li.id="li_"+dt.Rows[i].CategoryID;

varimg=document.createElement("img");
img.id=dt.Rows[i].CategoryID;
img.className="s";
img.src="../../Styles/tree_css/s.gif";

vara=document.createElement("a");
varid=dt.Rows[i].CategoryID;
a.onmouseover=function()
{
PreviewImage(id);
};
a.href="javascript:OpenDocument('"+dt.Rows[i].CategoryID+"');";
a.innerHTML=dt.Rows[i].CategoryName;
}
else
{
varli=document.createElement("li");
li.className="Closed";
li.id="li_"+dt.Rows[i].CategoryID;

varimg=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="展开/折叠";

vara=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);
}

//叶子节点的单击响应函数
functionOpenDocument(iCategoryID)
{
//预加载信息
PreloadFormUrl(iCategoryID);
}

functionPreviewImage(iCategoryID)
{

}

functionChangeStatus(iCategoryID)
{
varli_father=el("li_"+iCategoryID);
if(li_father.className=="Closed")
{
li_father.className="Opened";
}
else
{
li_father.className="Closed";
}
}

functionswitchNote(iCategoryID,show)
{
varli_father=el("li_"+iCategoryID);
if(show)
{
varul=document.createElement("ul");
ul.id="ul_note_"+iCategoryID;

varnote=document.createElement("li");
note.className="Child";

varimg=document.createElement("img");
img.className="s";
img.src="../../Styles/tree_css/s.gif";

vara=document.createElement("a");
a.href="javascript:void(0);";
a.innerHTML="请稍候";

note.appendChild(img);
note.appendChild(a);
ul.appendChild(note);
li_father.appendChild(ul);
}
else
{
varul=el("ul_note_"+iCategoryID);
if(ul)
{
li_father.removeChild(ul);
}
}
}

//加载根节点
vartree=el("CategoryTree");
varroot=document.createElement("li");
root.id="li_0";
tree.appendChild(root);

//加载页面时显示第一级分类
ExpandSubCategory(0);

functionPreloadFormUrl(iCategoryID)
{
//采用同步调用的方式获取图片的信息
vards=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
{
protectedvoidPage_Load(objectsender,EventArgse)
{
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:12pxtahoma,宋体,sans-serif;
}
dt
{} {
font-size:22px;
font-weight:bold;
margin:00015px;
}
dd
{} {
margin:00015px;
}
h4
{} {
margin:0;
padding:0;
font-size:18px;
text-align:center;
}
p
{} {
margin:0;
padding:00018px;
}
pa,pa:visited
{} {
color:#00f;
background:inherit;
}

.TreeMenuimg.s
{} {
cursor:hand;
vertical-align:middle;
}
.TreeMenuul
{} {
padding:0;
}
.TreeMenuli
{} {
list-style:none;
padding:0;
}
.Closedul
{} {
display:none;
}
.Childimg.s
{} {
background:none;
cursor:default;
}

#CategoryTreeul
{} {
margin:00017px;
}
#CategoryTreeimg.s
{} {
width:34px;
height:18px;
}
#CategoryTree.Openedimg.s
{} {
background:url(skin3/opened.gif)no-repeat01px;
}
#CategoryTree.Closedimg.s
{} {
background:url(skin3/closed.gif)no-repeat01px;
}
#CategoryTree.Childimg.s
{} {
background:url(skin3/child.gif)no-repeat13px2px;
}

#CategoryTree
{} {
float:left;
width:249px;
border:1pxsolid#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>
///SummarydescriptionforAjaxMethod
///</summary>
public class AjaxMethod
{} {
publicAjaxMethod()
{
//
//TODO:Addconstructorlogichere
//
}
[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
publicstaticDataSetGetSubCategory(intiCategoryID)
{}{
stringsql=string.Format("SELECTCategoryID,CategoryName,FatherID,dbo.IsLeaf(CategoryID)asIsChildFROMCategoryWHEREFatherID={0}",iCategoryID);
returnGetDataSet(sql);
}

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
publicstaticDataSetGetFormsList(intiCategoryID)
{}{
stringsql=string.Format("SELECT*FROMformsWHEREform_category_id={0}",iCategoryID);
returnGetDataSet(sql);
}
publicstaticstringConnectionString=ConfigurationSettings.AppSettings["ConnectionString"].ToString();

publicstaticDataSetGetDataSet(stringsql)
{}{
SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);
DataSetds=newDataSet();
sda.Fill(ds);
if(ds!=null)
returnds;
else
returnnull;
}
}

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 )COLLATEChinese_PRC_CI_AS NULL ,
[ FatherID ] [ int ] NULL
) ON [ PRIMARY ]
GO

CREATE TABLE [ dbo ] . [ Forms ] (
[ FormID ] [ int ] IDENTITY ( 1 , 1 ) NOT NULL ,
[ FormName ] [ nvarchar ] ( 50 )COLLATEChinese_PRC_CI_AS NULL ,
[ FormUrl ] [ nvarchar ] ( 50 )COLLATEChinese_PRC_CI_AS NULL ,
[ Form_category_id ] [ int ] NULL ,
[ target ] [ char ] ( 10 )COLLATEChinese_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

6. 源代码下载