Ajax實作無刷新樹

函數 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 = "關閉";
}
}

function switchNote(iCategoryID, show)
{
var li_father = el("li_" + iCategoryID);
如果（顯示）
{
var ul = document.createElement("ul");
ul.id = "ul_note_" + iCategoryID;

var note = document.createElement("li");
note.className = "孩子";

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 = "請稍候";

注意.appendChild(img);
注意.appendChild(a);
ul.appendChild(註);
li_father.appendChild(ul);
}
別的
{
var ul = el("ul_note_" + iCategoryID);
如果（ul）
{
li_father.removeChild(ul);
}
}
}

// 載入根節點
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 // 分類下沒有
{
}
}
}



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

結束