Ajax實作無刷新樹

作者：Eve Cole 更新時間：2009-07-06 16:30:05

1.建立一個aspx頁面
html程式碼
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="伺服器">
<title>小山</title>
<link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</頭>
<正文>
<form id="Form1" runat="伺服器">
<表格寬度=100% cellpadding=0 cellspacing=0 border=0>
<colgroup>
<col寬度=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>
</表>

<腳本語言=“jscript”>
函數 el(id)
{
返回 document.getElementById(id);
}
函數 ExpandSubCategory(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //分類已下載
{
更改狀態（iCategoryID）；
返回;
}

li_father.className = "已開啟";

switchNote(iCategoryID, true);
AjaxMethod.GetSubCategory(iCategoryID, GetSubCategory_callback);
}

函數 GetSubCategory_callback（回應）
{
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 = "孩子";
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()
{
預覽圖像（id）；
};
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
a.innerHTML = dt.Rows[i].CategoryName;
}
別的
{
var li = document.createElement("li");
li.className = "關閉";
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 = 函數 () {
展開子類別(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);
}

// 葉子節點的循環回應函數
函數 OpenDocument(iCategoryID)
{
// 預先載入訊息
PreloadFormUrl(iCategoryID);
}

函數預覽影像（iCategoryID）
{

}

函數 ChangeStatus(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.className == "關閉")
{
li_father.className = "已開啟";
}
別的
{
li_father.className = "關閉";
}
}

// 載入根節點
var tree = el("類別樹");
var root = document.createElement("li");
root.id = "li_0";
樹.appendChild(根);

// 載入頁面時顯示一級分類
展開子類別(0);

函數 PreloadFormUrl(iCategoryID)
{
//採用同步呼叫的方式取得圖片的訊息
var ds = AjaxMethod.GetFormsList(iCategoryID).value;
// 如果回傳了結果
如果（ds）
{
//判斷資料表是否不為空
if (ds.Tables[0].Rows.length > 0)
{
//傳回的資訊資料表
dt = ds.Tables[0];
el("furl").src = dt.Rows[0].FormUrl;
}
else // 分類下沒有
{
}
}
}
</腳本>
</形式>
</正文>
</html>2.cs程式碼
使用系統；
使用系統數據；
使用系統配置；
使用系統集合；
使用系統.Web；
使用 System.Web.Security；
使用 System.Web.UI；
使用 System.Web.UI.WebControls；
使用 System.Web.UI.WebControls.WebParts；
使用 System.Web.UI.HtmlControls；
使用 AjaxPro；

公共部分類別 Pages_Home_HomePage ：System.Web.UI.Page
{
protected void Page_Load（物件發送者，EventArgs e）
{
Utility.RegisterTypeForAjax(typeof(AjaxMethod));
}
}3.建立一個tree.css的css樣式
一個
{}{
文字裝飾：無；
}
a,a:訪問過
{}{
顏色：#000；
背景：繼承；
}
身體
{}{
保證金：0；
內邊距：20px；
字體：12px tahoma、宋體、無襯線；
}
dt
{}{
字體大小：22px；
字體粗細：粗體；
邊距：0 0 0 15px；
}
DD
{}{
邊距：0 0 0 15px；
}
小時4
{}{
保證金：0；
填充：0；
字體大小：18px；
文字對齊：居中；
}
p
{}{
保證金：0；
內邊距：0 0 0 18px；
}
pa,pa:訪問過
{}{
顏色：#00f；
背景：繼承；
.TreeMenu

img.s
{}{
遊標：手；
垂直對齊：中間；
}
.TreeMenu ul
{}{
填充：0；
}
.TreeMenu 裡
{}{
列表樣式：無；
填充：0；
}
.關閉ul
{}{
顯示：無；
}
.兒童img.s
{}{
背景：無；
遊標：預設；
#CategoryTree

ul
{}{
邊距：0 0 0 17px；
}
#CategoryTree img.s
{}{
寬度：34px；
高度：18px；
}
#CategoryTree.打開的img.s
{}{
背景：url(skin3/opened.gif) 無重複 0 1px;
}
#CategoryTree .Closed img.s
{}{
背景：url(skin3/close.gif) 無重複 0 1px;
}
#CategoryTree .Child img.s
{}{
背景：url(skin3/child.gif) 無重複 13px 2px；

#CategoryTree

{}{
浮動：左；
寬度：249px；
邊框：1px實心#99BEEF；
背景：#D2E4FC；
顏色：繼承；
邊距：3px；
內邊距：3px；
高度：600px；
}
4.建立一類Ajax方法
使用系統；
使用系統數據；
使用 System.Data.SqlClient；
使用系統配置；
使用系統.Web；
使用 System.Web.Security；
使用 System.Web.UI；
使用 System.Web.UI.WebControls；
使用 System.Web.UI.WebControls.WebParts；
使用 System.Web.UI.HtmlControls；
使用 AjaxPro；

/**//// <摘要>
/// AjaxMethod 的摘要描述
/// </摘要>
公共類別Ajax方法
{}{
公共 Ajax 方法()
{
//
// TODO: 在此處新增建構函式邏輯
//
}
[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
公共靜態資料集 GetSubCategory(int iCategoryID)
{}{
string sql = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
返回 GetDataSet(sql);

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)

]

公共靜態資料集 GetFormsList(int iCategoryID)
{}{
string sql = string.Format("SELECT * FROM forms WHERE form_category_id = {0}", iCategoryID);
返回 GetDataSet(sql);
}
公用靜態字串 ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

公共靜態資料集GetDataSet（字串sql）
{}{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
資料集 ds = new 資料集();
sda.Fill(ds);
if (ds != null)
返回ds；
別的
返回空值；
}
}5.sql腳本
如果存在（從 dbo.sysobjects 選擇 *，其中 id = object_id(N'[dbo].[Category]') 和 OBJECTPROPERTY(id, N'IsUserTable') = 1）
刪除表 [dbo].[類別]
GO

如果存在（select * from dbo.sysobjects where id = object_id(N'[dbo].[Forms]') and OBJECTPROPERTY(id, N'IsUserTable') = 1）
刪除表 [dbo].[表單]
去

建立表 [dbo].[類別] (
[類別ID] [int] IDENTITY (1, 1) NOT NULL ,
[CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[父親ID] [int] NULL
) 關於 [主要]
去

建立表 [dbo].[表單] (
[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 ,
[目標] [字元] (10) COLLATE 中文_PRC_CI_AS NULL
) 關於 [主要]
去
建立函數 IsLeaf (@cat_id int)
傳回整數 AS
BEGIN

聲明 @count int
選擇@count =（從類別中選擇count(*)，其中FatherID=@cat_id ）
如果（@計數=0）
返回1
回 0

結束