Ajax Tree

1.建立一个aspx页面
html代码

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  id ="Head1"  runat ="server" >
< title > Ajax Tree </ title >
< link  type ="text/css"  href ="http://www.cnblogs.com/Styles/tree_css/tree.css"  rel ="stylesheet" >
</ head >
< body >
< form  id ="Form1"  runat ="server" >
< div  class ="TreeMenu"  id ="CategoryTree"  style ="width: 100%; height: 489px" >
</ div >
< script  language ="javascript"  type ="text/javascript" >
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  =   " http://www.cnblogs.com/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  =   " http://www.cnblogs.com/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  =   " http://www.cnblogs.com/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)
{
AjaxPro.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

转载于:https://www.cnblogs.com/anson2020/archive/2007/11/19/964526.html