树_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
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Configuration;
5using System.Data;
6using System.Data.SqlClient;
7using System.Drawing;
8using System.Web;
9using System.Web.SessionState;
10using System.Web.UI;
11using System.Web.UI.WebControls;
12using System.Web.UI.HtmlControls;
13using AjaxPro;
14
15namespace 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 窗体设计器生成的代码
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:
1a
2{
3 text-decoration:none;
4}
5a,a:visited
6{
7 color:#000;
8 background:inherit;
9}
10body
11{
12 margin:0;
13 padding:20px;
14 font:12px tahoma,宋体,sans-serif;
15}
16dt
17{
18 font-size:22px;
19 font-weight:bold;
20 margin:0 0 0 15px;
21}
22dd
23{
24 margin:0 0 0 15px;
25}
26h4
27{
28 margin:0;
29 padding:0;
30 font-size:18px;
31 text-align:center;
32}
33p
34{
35 margin:0;
36 padding:0 0 0 18px;
37}
38p 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}
100http://komazhang.cnblogs.com/archive/2006/05/08/394236.html
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 窗体设计器生成的代码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
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
