树_ajax
aspx:


1
<%@ Page language="c#" Codebehind="tree.aspx.cs" AutoEventWireup="false" Inherits="myTree.tree" %>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3
<HTML>
4
<HEAD>
5
<title>tree</title>
6
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
7
<meta content="C#" name="CODE_LANGUAGE">
8
<meta content="JavaScript" name="vs_defaultClientScript">
9
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10
<LINK href="http://localhost/myTree/tree.css" type="text/css" rel="stylesheet">
11
</HEAD>
12
<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">
13
<form id="Form1" method="post" runat="server">
14
<FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体">
15
</FONT>
16
<div class="TreeMenu" id="CategoryTree" style="WIDTH: 272px; HEIGHT: 424px"><FONT face="宋体"></FONT></div>
17
<BR>
18
<script type="text/javascript">
19
var tree = document.getElementById("CategoryTree");
20
var root = document.createElement("li");
21
root.id = "li_0";
22
tree.appendChild(root);
23
//加载第一分级
24
ExpandSubCategory(0);
25
26
27
function ExpandSubCategory(iCategoryID)
28
{
29
var li_father = document.getElementById("li_"+iCategoryID);
30
if(li_father.getElementsByTagName("li").length>0)//downloaded
31
{
32
ChangeStatus(iCategoryID);
33
return ;
34
}
35
li_father.className = "Opened";
36
switchNote(iCategoryID,true);
37
myTree.tree.GetSubCategory(iCategoryID,GetSubCategory_callback);
38
39
}
40
41
function GetSubCategory_callback(response)
42
{
43
44
var dt = response.value.Tables[0];
45
if (dt.Rows.length > 0)
46
{
47
var iCategoryID = dt.Rows[0].FatherID;
48
}
49
var li_father = document.getElementById("li_" + iCategoryID);
50
var ul = document.createElement("ul");
51
for (var i = 0;i < dt.Rows.length;i++)
52
{
53
if (dt.Rows[i].IsChild == 1) //叶子节点
54
{
55
var li = document.createElement("li");
56
li.className = "Child";
57
li.id = "li_" + dt.Rows[i].CategoryID;
58
59
var img = document.createElement("img");
60
img.id = dt.Rows[i].CategoryID;
61
img.className = "s";
62
img.src = "s.gif";
63
64
var a = document.createElement("a");
65
a.innerHTML = dt.Rows[i].CategoryName;
66
a.href = "tree.aspx"
67
}
68
else
69
{
70
var li = document.createElement("li");
71
li.className = "Closed";
72
li.id = "li_" + dt.Rows[i].CategoryID;
73
74
var img = document.createElement("img");
75
img.id = dt.Rows[i].CategoryID;
76
img.className = "s";
77
img.src = "s.gif";
78
img.onclick = function ()
{
79
ExpandSubCategory(this.id);
80
};
81
img.alt = "展开/折叠";
82
83
var a = document.createElement("a");
84
a.href = "javascript:ExpandSubCategory(" +
85
dt.Rows[i].CategoryID + ");";
86
a.innerHTML = dt.Rows[i].CategoryName;
87
}
88
li.appendChild(img);
89
li.appendChild(a);
90
ul.appendChild(li);
91
}
92
li_father.appendChild(ul);
93
94
switchNote(iCategoryID, false);
95
}
96
97
function ChangeStatus(iCategoryID)
98
{
99
var li_father = document.getElementById("li_" + iCategoryID);
100
if (li_father.className == "Closed")
101
{
102
li_father.className = "Opened";
103
}
104
else
105
{
106
li_father.className = "Closed";
107
}
108
}
109
110
function switchNote(iCategoryID,show)
111
{
112
var li_father = document.getElementById("li_"+iCategoryID);
113
if(show)
114
{
115
var ul = document.createElement("ul");
116
ul.id = "ul_note_"+iCategoryID;
117
118
var note = document.createElement("li");
119
note.className = "Child";
120
121
var img = document.createElement("img");
122
img.className = "s";
123
124
var a =document.createElement("a");
125
a.innerHTML ="请稍后
";
126
a.href = "javascript:void(0)";
127
128
note.appendChild(img);
129
note.appendChild(a);
130
ul.appendChild(note);
131
li_father.appendChild(ul);
132
}
133
else
134
{
135
var ul = document.getElementById("ul_note_"+iCategoryID);
136
if(ul)
137
{
138
li_father.removeChild(ul);
139
}
140
141
}
142
}
143
144
</script>
145
</form>
146
</body>
147
</HTML>
148


1
using System;
2
using System.Collections;
3
using System.ComponentModel;
4
using System.Configuration;
5
using System.Data;
6
using System.Data.SqlClient;
7
using System.Drawing;
8
using System.Web;
9
using System.Web.SessionState;
10
using System.Web.UI;
11
using System.Web.UI.WebControls;
12
using System.Web.UI.HtmlControls;
13
using AjaxPro;
14
15
namespace myTree
16

{
17
/**//// <summary>
18
/// tree 的摘要说明。
19
/// </summary>
20
public class tree : System.Web.UI.Page
21
{
22
private Random rand = new Random();
23
24
25
26
private void Page_Load(object sender, System.EventArgs e)
27
{
28
AjaxPro.Utility.RegisterTypeForAjax(typeof(tree));
29
}
30
31
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
32
override protected void OnInit(EventArgs e)
33
{
34
//
35
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
36
//
37
InitializeComponent();
38
base.OnInit(e);
39
}
40
41
/**//// <summary>
42
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
43
/// 此方法的内容。
44
/// </summary>
45
private void InitializeComponent()
46
{
47
this.Load += new System.EventHandler(this.Page_Load);
48
49
}
50
#endregion
51
52
[AjaxMethod()]
53
public DataSet GetSubCategory(int iCategoryID)
54
{
55
DataSet ds = new DataSet();
56
57
SqlConnection conn =
58
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
59
SqlCommand cmd = conn.CreateCommand();
60
cmd.CommandText = string.Format(
61
"SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}",
62
iCategoryID);
63
SqlDataAdapter da = new SqlDataAdapter(cmd);
64
65
try
66
{
67
da.Fill(ds);
68
}
69
catch (SqlException ex)
70
{
71
72
}
73
finally
74
{
75
conn.Close();
76
}
77
78
System.Threading.Thread.Sleep(500 + rand.Next(1000));
79
80
return ds;
81
}
82
83
84
[AjaxMethod()]
85
public DataSet GetDocInfo(int iCategoryID)
86
{
87
DataSet ds = new DataSet();
88
89
SqlConnection conn =
90
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
91
SqlCommand cmd = conn.CreateCommand();
92
cmd.CommandText = string.Format(
93
"SELECT id, author, title, convert(varchar(20), writetime, 120) as writetime, url FROM DocInfo WHERE id = {0}", iCategoryID);
94
SqlDataAdapter da = new SqlDataAdapter(cmd);
95
96
try
97
{
98
da.Fill(ds);
99
}
100
catch (SqlException)
101
{
102
}
103
finally
104
{
105
conn.Close();
106
}
107
108
return ds;
109
}
110
111
[AjaxMethod()]
112
public DataSet GetDocInfoInCategory(int iCategoryID)
113
{
114
DataSet ds = new DataSet();
115
116
SqlConnection conn =
117
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
118
SqlCommand cmd = conn.CreateCommand();
119
cmd.CommandText = string.Format(
120
"SELECT CategoryID, CategoryName, FatherID FROM Category WHERE FatherID = {0} AND dbo.IsLeaf(CategoryID) = 1", iCategoryID);
121
SqlDataAdapter da = new SqlDataAdapter(cmd);
122
123
try
124
{
125
da.Fill(ds);
126
}
127
catch (SqlException)
128
{
129
}
130
finally
131
{
132
conn.Close();
133
}
134
135
return ds;
136
}
137
138
139
}
140
}
141
css:


1
a
2

{
3
text-decoration:none;
4
}
5
a,a:visited
6

{
7
color:#000;
8
background:inherit;
9
}
10
body
11

{
12
margin:0;
13
padding:20px;
14
font:12px tahoma,宋体,sans-serif;
15
}
16
dt
17

{
18
font-size:22px;
19
font-weight:bold;
20
margin:0 0 0 15px;
21
}
22
dd
23

{
24
margin:0 0 0 15px;
25
}
26
h4
27

{
28
margin:0;
29
padding:0;
30
font-size:18px;
31
text-align:center;
32
}
33
p
34

{
35
margin:0;
36
padding:0 0 0 18px;
37
}
38
p a,p a:visited
39

{
40
color:#00f;
41
background:inherit;
42
}
43
44
.TreeMenu img.s
45

{
46
cursor:hand;
47
vertical-align:middle;
48
}
49
.TreeMenu ul
50

{
51
padding:0;
52
}
53
.TreeMenu li
54

{
55
list-style:none;
56
padding:0;
57
}
58
.Closed ul
59

{
60
display:none;
61
}
62
.Child img.s
63

{
64
background:none;
65
cursor:default;
66
}
67
68
#CategoryTree ul
69

{
70
margin:0 0 0 17px;
71
}
72
#CategoryTree img.s
73

{
74
width:34px;
75
height:18px;
76
}
77
#CategoryTree .Opened img.s
78

{
79
background:url(skin/opened.gif) no-repeat 0 1px;
80
}
81
#CategoryTree .Closed img.s
82

{
83
background:url(skin/closed.gif) no-repeat 0 1px;
84
}
85
#CategoryTree .Child img.s
86

{
87
background:url(skin/child.gif) no-repeat 13px 2px;
88
}
89
90
#CategoryTree
91

{
92
float:left;
93
width:249px;
94
border:1px solid #99BEEF;
95
background:#D2E4FC;
96
color:inherit;
97
margin:3px;
98
padding:3px;
99
}
100
1
<%@ Page language="c#" Codebehind="tree.aspx.cs" AutoEventWireup="false" Inherits="myTree.tree" %>2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >3
<HTML>4
<HEAD>5
<title>tree</title>6
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">7
<meta content="C#" name="CODE_LANGUAGE">8
<meta content="JavaScript" name="vs_defaultClientScript">9
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">10
<LINK href="http://localhost/myTree/tree.css" type="text/css" rel="stylesheet">11
</HEAD>12
<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">13
<form id="Form1" method="post" runat="server">14
<FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体">15
</FONT>16
<div class="TreeMenu" id="CategoryTree" style="WIDTH: 272px; HEIGHT: 424px"><FONT face="宋体"></FONT></div>17
<BR>18
<script type="text/javascript">19
var tree = document.getElementById("CategoryTree");20
var root = document.createElement("li");21
root.id = "li_0";22
tree.appendChild(root);23
//加载第一分级24
ExpandSubCategory(0);25
26
27
function ExpandSubCategory(iCategoryID)28

{29
var li_father = document.getElementById("li_"+iCategoryID);30
if(li_father.getElementsByTagName("li").length>0)//downloaded31

{32
ChangeStatus(iCategoryID);33
return ;34
}35
li_father.className = "Opened";36
switchNote(iCategoryID,true);37
myTree.tree.GetSubCategory(iCategoryID,GetSubCategory_callback);38
39
}40

41
function GetSubCategory_callback(response)42

{43
44
var dt = response.value.Tables[0];45
if (dt.Rows.length > 0)46

{47
var iCategoryID = dt.Rows[0].FatherID;48
}49
var li_father = document.getElementById("li_" + iCategoryID);50
var ul = document.createElement("ul");51
for (var i = 0;i < dt.Rows.length;i++)52

{53
if (dt.Rows[i].IsChild == 1) //叶子节点54

{55
var li = document.createElement("li");56
li.className = "Child";57
li.id = "li_" + dt.Rows[i].CategoryID;58
59
var img = document.createElement("img");60
img.id = dt.Rows[i].CategoryID;61
img.className = "s";62
img.src = "s.gif";63
64
var a = document.createElement("a");65
a.innerHTML = dt.Rows[i].CategoryName;66
a.href = "tree.aspx"67
}68
else69

{70
var li = document.createElement("li");71
li.className = "Closed";72
li.id = "li_" + dt.Rows[i].CategoryID;73
74
var img = document.createElement("img");75
img.id = dt.Rows[i].CategoryID;76
img.className = "s";77
img.src = "s.gif";78

img.onclick = function ()
{79
ExpandSubCategory(this.id);80
};81
img.alt = "展开/折叠";82
83
var a = document.createElement("a");84
a.href = "javascript:ExpandSubCategory(" +85
dt.Rows[i].CategoryID + ");";86
a.innerHTML = dt.Rows[i].CategoryName;87
}88
li.appendChild(img);89
li.appendChild(a);90
ul.appendChild(li); 91
}92
li_father.appendChild(ul);93
94
switchNote(iCategoryID, false);95
}96
97
function ChangeStatus(iCategoryID)98

{99
var li_father = document.getElementById("li_" + iCategoryID);100
if (li_father.className == "Closed")101

{102
li_father.className = "Opened";103
}104
else105

{106
li_father.className = "Closed";107
} 108
}109
110
function switchNote(iCategoryID,show)111

{112
var li_father = document.getElementById("li_"+iCategoryID);113
if(show)114

{115
var ul = document.createElement("ul");116
ul.id = "ul_note_"+iCategoryID;117
118
var note = document.createElement("li");119
note.className = "Child";120
121
var img = document.createElement("img");122
img.className = "s";123
124
var a =document.createElement("a");125
a.innerHTML ="请稍后
";126
a.href = "javascript:void(0)";127
128
note.appendChild(img);129
note.appendChild(a);130
ul.appendChild(note);131
li_father.appendChild(ul);132
}133
else134

{135
var ul = document.getElementById("ul_note_"+iCategoryID);136
if(ul)137

{138
li_father.removeChild(ul);139
}140
141
}142
}143
144
</script>145
</form>146
</body>147
</HTML>148

cs:
1
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Configuration;5
using System.Data;6
using System.Data.SqlClient;7
using System.Drawing;8
using System.Web;9
using System.Web.SessionState;10
using System.Web.UI;11
using System.Web.UI.WebControls;12
using System.Web.UI.HtmlControls;13
using AjaxPro;14

15
namespace myTree16


{17

/**//// <summary>18
/// tree 的摘要说明。19
/// </summary>20
public class tree : System.Web.UI.Page21

{22
private Random rand = new Random();23
24

25

26
private void Page_Load(object sender, System.EventArgs e)27

{28
AjaxPro.Utility.RegisterTypeForAjax(typeof(tree));29
}30

31

Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码32
override protected void OnInit(EventArgs e)33

{34
//35
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。36
//37
InitializeComponent();38
base.OnInit(e);39
}40
41

/**//// <summary>42
/// 设计器支持所需的方法 - 不要使用代码编辑器修改43
/// 此方法的内容。44
/// </summary>45
private void InitializeComponent()46

{ 47
this.Load += new System.EventHandler(this.Page_Load);48

49
}50
#endregion51

52
[AjaxMethod()]53
public DataSet GetSubCategory(int iCategoryID)54

{55
DataSet ds = new DataSet();56

57
SqlConnection conn =58
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);59
SqlCommand cmd = conn.CreateCommand(); 60
cmd.CommandText = string.Format(61
"SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}",62
iCategoryID);63
SqlDataAdapter da = new SqlDataAdapter(cmd);64

65
try66

{67
da.Fill(ds);68
}69
catch (SqlException ex)70

{71
72
}73
finally74

{75
conn.Close();76
}77

78
System.Threading.Thread.Sleep(500 + rand.Next(1000));79

80
return ds;81
}82

83

84
[AjaxMethod()]85
public DataSet GetDocInfo(int iCategoryID)86

{87
DataSet ds = new DataSet();88

89
SqlConnection conn =90
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);91
SqlCommand cmd = conn.CreateCommand(); 92
cmd.CommandText = string.Format(93
"SELECT id, author, title, convert(varchar(20), writetime, 120) as writetime, url FROM DocInfo WHERE id = {0}", iCategoryID);94
SqlDataAdapter da = new SqlDataAdapter(cmd);95

96
try97

{98
da.Fill(ds);99
}100
catch (SqlException)101

{102
}103
finally104

{105
conn.Close();106
}107

108
return ds;109
}110

111
[AjaxMethod()]112
public DataSet GetDocInfoInCategory(int iCategoryID)113

{114
DataSet ds = new DataSet();115

116
SqlConnection conn =117
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);118
SqlCommand cmd = conn.CreateCommand(); 119
cmd.CommandText = string.Format(120
"SELECT CategoryID, CategoryName, FatherID FROM Category WHERE FatherID = {0} AND dbo.IsLeaf(CategoryID) = 1", iCategoryID);121
SqlDataAdapter da = new SqlDataAdapter(cmd);122

123
try124

{125
da.Fill(ds);126
}127
catch (SqlException)128

{129
}130
finally131

{132
conn.Close();133
}134

135
return ds;136
}137
138

139
}140
}141

css:
1
a2


{3
text-decoration:none;4
}5
a,a:visited6


{7
color:#000;8
background:inherit;9
}10
body11


{12
margin:0;13
padding:20px;14
font:12px tahoma,宋体,sans-serif;15
}16
dt17


{18
font-size:22px;19
font-weight:bold;20
margin:0 0 0 15px;21
}22
dd23


{24
margin:0 0 0 15px;25
}26
h427


{28
margin:0;29
padding:0;30
font-size:18px;31
text-align:center;32
}33
p34


{35
margin:0;36
padding:0 0 0 18px;37
}38
p a,p a:visited39


{40
color:#00f;41
background:inherit;42
}43

44
.TreeMenu img.s45


{46
cursor:hand;47
vertical-align:middle;48
}49
.TreeMenu ul50


{51
padding:0;52
}53
.TreeMenu li54


{55
list-style:none;56
padding:0;57
}58
.Closed ul59


{60
display:none;61
}62
.Child img.s63


{64
background:none;65
cursor:default;66
}67

68
#CategoryTree ul69


{70
margin:0 0 0 17px;71
}72
#CategoryTree img.s73


{74
width:34px;75
height:18px;76
}77
#CategoryTree .Opened img.s78


{79
background:url(skin/opened.gif) no-repeat 0 1px;80
}81
#CategoryTree .Closed img.s82


{83
background:url(skin/closed.gif) no-repeat 0 1px;84
}85
#CategoryTree .Child img.s86


{87
background:url(skin/child.gif) no-repeat 13px 2px;88
}89

90
#CategoryTree91


{92
float:left;93
width:249px;94
border:1px solid #99BEEF;95
background:#D2E4FC;96
color:inherit;97
margin:3px;98
padding:3px;99
}100

浙公网安备 33010602011771号