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">
</head>
<본문>
<form id="Form1" runat="서버">
<테이블 너비=100% cellpadding=0 셀 간격=0 테두리=0>
<열그룹>
<열 너비=180 />
<열 />
</colgroup>
<tr>
<TD>
<div class="TreeMenu" id="CategoryTree" style="너비: 100%; 높이: 489px">
</div>
</td>
<TD>
<iframe id=furl height=20 style="높이: 497px; 너비: 100%;"></iframe>
</td>
</tr>
</table>

<스크립트 언어="jscript">
함수 el(id)
{
return document.getElementById(id);
}
함수 ExpandSubCategory(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.getElementsByTagName("li").length > 0) //분류已下载
{
ChangeStatus(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 = 함수()
{
PreviewImage(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 = 함수 () {
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);
}

// 叶子节点的单击响应函数
함수 OpenDocument(iCategoryID)
{
// 预加载信息
PreloadFormUrl(iCategoryID);
}

함수 PreviewImage(iCategoryID)
{

}

함수 ChangeStatus(iCategoryID)
{
var li_father = el("li_" + iCategoryID);
if (li_father.className == "닫음")
{
li_father.className = "열림";
}
또 다른
{
li_father.className = "닫음";
}
}

함수 switchNote(iCategoryID, 표시)
{
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 = "설명";

note.appendChild(img);
note.appendChild(a);
ul.appendChild(참고);
li_father.appendChild(ul);
}
또 다른
{
var ul = el("ul_note_" + iCategoryID);
만약 (ul)
{
li_father.removeChild(ul);
}
}
}

// 加载根节点
var tree = el("CategoryTree");
var root = document.createElement("li");
root.id = "li_0";
tree.appendChild(루트);

// 加载页면时显示第一级分类
ExpandSubCategory(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 // 分类下没有
{
}
}
}
</script>
</form>
</body>
</html>2.cs代码
시스템 사용;
System.Data 사용;
System.Configuration 사용;
System.Collections 사용;
System.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,宋体,sans-serif;
}
dt
{}{
글꼴 크기:22px;
글꼴 두께:굵게;
여백:0 0 0 15px;
}
dd
{}{
여백:0 0 0 15px;
}
h4
{}{
여백:0;
패딩:0;
글꼴 크기:18px;
텍스트 정렬:가운데;
}
피
{}{
여백:0;
패딩:0 0 0 18px;
}
아빠, 아빠:방문했어요
{}{
색상:#00f;
배경:상속;
}

.TreeMenu img.s
{}{
커서:손;
수직 정렬:가운데;
}
.TreeMenu ul
{}{
패딩:0;
}
.Tree메뉴 li
{}{
목록 스타일:없음;
패딩: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/closed.gif) 반복 없음 0 1px;
}
#CategoryTree .Child img.s
{}{
배경:url(skin3/child.gif) 반복 없음 13px 2px;
}

#카테고리 트리
{}{
부동:왼쪽;
너비:249px;
테두리:1px 솔리드 #99BEEF;
배경:#D2E4FC;
색상:상속;
여백:3px;
패딩:3px;
높이:600px;
}
4.Ajax 메소드
시스템 사용;
System.Data 사용;
System.Data.SqlClient 사용;
System.Configuration 사용;
System.Web 사용;
System.Web.Security 사용;
System.Web.UI 사용;
System.Web.UI.WebControls 사용;
System.Web.UI.WebControls.WebParts 사용;
System.Web.UI.HtmlControls 사용;
AjaxPro 사용;

/**//// <요약>
/// AjaxMethod에 대한 요약 설명
/// </summary>
공개 클래스 AjaxMethod
{}{
공개 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 양식 WHERE form_category_id = {0}", iCategoryID);
GetDataSet(sql)을 반환합니다.
}
공용 정적 문자열 ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

공개 정적 데이터 세트 GetDataSet(문자열 sql)
{}{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = 새로운 DataSet();
sda.Fill(ds);
if (ds != null)
DS를 반환;
또 다른
null을 반환;
}
}5.sql脚本
존재하는 경우(id = object_id(N'[dbo].[Category]') 및 OBJECTPROPERTY(id, N'IsUserTable') = 1인 dbo.sysobjects에서 * 선택)
드롭 테이블 [dbo].[범주]

존재하는 경우

(id = object_id(N'[dbo].[Forms]') 및 OBJECTPROPERTY(id, N'IsUserTable') = 1인 dbo.sysobjects에서 * 선택)
드롭 테이블 [dbo].[양식]
GO

CREATE TABLE [dbo].[카테고리] (
[CategoryID] [int] IDENTITY (1, 1) NOT NULL ,
[CategoryName] [varchar] (20) COLLATE Chinese_PRC_CI_AS NULL ,
[아버지ID] [int] NULL
) [기본] 사용
GO

CREATE TABLE [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 선택 = ( FatherID=@cat_id 인 범주에서 count(*) 선택)
만약 (@count=0)
1을 반환
0을 반환

END