花朵ajax,ajax实现无刷新树_ajax教程

1.建立一个aspx页面

html代码

小山

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 = “../../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 = “../../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 = “../../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 // 分类下没有

{

}

}

}

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)

{

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 description for AjaxMethod

///

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, NIsUserTable) = 1)

drop table [dbo].[Category]

GO

if exists (select * from dbo.sysobjects where id = object_id(N[dbo].[Forms]) and OBJECTPROPERTY(id, NIsUserTable) = 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