Ajax实现无刷新树 For .Net
http://images.cnblogs.com/cnblogs_com/zm235/Ajax1.jpg
1.建立一个aspx页面
html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>小山</title>
<link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</head>
<body>
<form id="Form1" runat="server">
<table width=100% cellpadding=0 cellspacing=0 border=0>
<colgroup>
<col width=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>
</table>
<script language="jscript">
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 = "java script: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 = "java script: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 = "java script: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)
{
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
1.建立一个aspx页面
html代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>小山</title>
<link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
</head>
<body>
<form id="Form1" runat="server">
<table width=100% cellpadding=0 cellspacing=0 border=0>
<colgroup>
<col width=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>
</table>
<script language="jscript">
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 = "java script: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 = "java script: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 = "java script: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)
{
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