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 Chinese_PRC_CI_AS NULL
) 关于 [主要]
去
创建函数 IsLeaf (@cat_id int)
返回整数 AS
BEGIN

声明 @count int
选择@count =（从类别中选择count(*)，其中FatherID=@cat_id ）
如果（@计数=0）
返回1
返回 0

结束