aspx(js included)
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
<%@ Page language="c#" Codebehind="tree.aspx.cs" AutoEventWireup="false" Inherits="tree_2.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/tree_2/tree.css" type="text/css" rel="stylesheet">
11
</HEAD>
12
<body>
13
<form id="Form1" method="post" runat="server">
14
<FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体">
15
</FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT>
16
<div id="CategoryTree" class="TreeMenu" style="WIDTH: 128px; HEIGHT: 352px"></div>
17
<FONT face="宋体"></FONT>
18
<script type="text/javascript">
19
function ExpandSubCategory(iCategoryID)
20![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
21
var li_father = document.getElementById("li_" + iCategoryID);
22
if (li_father.getElementsByTagName("li").length > 0)
23![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
ChangeStatus(iCategoryID);
25
displayDocList(iCategoryID);
26
return;
27
}
28
29
li_father.className = "Opened";
30
31
switchNote(iCategoryID, true);
32
tree_2.tree.GetSubCategory(iCategoryID, GetSubCategory_callback);
33
}
34
35
function GetSubCategory_callback(response)
36![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
37
var dt = response.value.Tables[0];
38
if (dt.Rows.length > 0)
39![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
40
var iCategoryID = dt.Rows[0].FatherID;
41
}
42
var li_father = document.getElementById("li_" + iCategoryID);
43
var ul = document.createElement("ul");
44
for (var i = 0;i < dt.Rows.length;i++)
45![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
46
if (dt.Rows[i].IsChild == 1) //叶子节点
47![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
48
var li = document.createElement("li");
49
li.className = "Child";
50
li.id = "li_" + dt.Rows[i].CategoryID;
51
52
var img = document.createElement("img");
53
img.id = dt.Rows[i].CategoryID;
54
img.className = "s";
55
img.src = "s.gif";
56
57
var a = document.createElement("a");
58
a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
59
a.innerHTML = dt.Rows[i].CategoryName;
60
}
61
else
62![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
63
var li = document.createElement("li");
64
li.className = "Closed";
65
li.id = "li_" + dt.Rows[i].CategoryID;
66
67
var img = document.createElement("img");
68
img.id = dt.Rows[i].CategoryID;
69
img.className = "s";
70
img.src = "s.gif";
71![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
img.onclick = function ()
{
72
ExpandSubCategory(this.id);
73
};
74
img.alt = "展开/折叠";
75
76
var a = document.createElement("a");
77
a.href = "javascript:ExpandSubCategory(" +
78
dt.Rows[i].CategoryID + ");";
79
a.innerHTML = dt.Rows[i].CategoryName;
80
}
81
li.appendChild(img);
82
li.appendChild(a);
83
ul.appendChild(li);
84
}
85
li_father.appendChild(ul);
86
87
switchNote(iCategoryID, false);
88
89
}
90
91
function ChangeStatus(iCategoryID)
92![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
93
var li_father = document.getElementById("li_" + iCategoryID);
94
if (li_father.className == "Closed")
95![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
96
li_father.className = "Opened";
97
}
98
else
99![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
100
li_father.className = "Closed";
101
}
102
}
103
104
function switchNote(iCategoryID, show)
105![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
106
var li_father = document.getElementById("li_" + iCategoryID);
107
if (show)
108![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
109
var ul = document.createElement("ul");
110
ul.id = "ul_note_" + iCategoryID;
111
112
var note = document.createElement("li");
113
note.className = "Child";
114
115
var img = document.createElement("img");
116
img.className = "s";
117
img.src = "s.gif";
118
119
var a = document.createElement("a");
120
a.href = "javascript:void(0);";
121
a.innerHTML = "请稍候
";
122
123
note.appendChild(img);
124
note.appendChild(a);
125
ul.appendChild(note);
126
li_father.appendChild(ul);
127
}
128
else
129![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
130
var ul = document.getElementById("ul_note_" + iCategoryID);
131
if (ul)
132![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
133
li_father.removeChild(ul);
134
}
135
}
136
}
137
var tree = document.getElementById("CategoryTree");
138
var root = document.createElement("li");
139
root.id = "li_0";
140
tree.appendChild(root);
141
142
// 加载页面时显示第一级分类
143
ExpandSubCategory(0);
144
145
</script>
146
</form>
147
</body>
148
</HTML>
149![](/Images/OutliningIndicators/None.gif)
css:
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
a
2![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
3
text-decoration:none;
4
}
5
a,a:visited
6![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
7
color:#000;
8
background:inherit;
9
}
10
body
11![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
12
margin:0;
13
padding:20px;
14
font:12px tahoma,宋体,sans-serif;
15
}
16
dt
17![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
18
font-size:22px;
19
font-weight:bold;
20
margin:0 0 0 15px;
21
}
22
dd
23![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
24
margin:0 0 0 15px;
25
}
26
h4
27![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
28
margin:0;
29
padding:0;
30
font-size:18px;
31
text-align:center;
32
}
33
p
34![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
35
margin:0;
36
padding:0 0 0 18px;
37
}
38
p a,p a:visited
39![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
40
color:#00f;
41
background:inherit;
42
}
43![](/Images/OutliningIndicators/None.gif)
44
.TreeMenu img.s
45![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
46
cursor:hand;
47
vertical-align:middle;
48
}
49
.TreeMenu ul
50![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
51
padding:0;
52
}
53
.TreeMenu li
54![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
55
list-style:none;
56
padding:0;
57
}
58
.Closed ul
59![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
60
display:none;
61
}
62
.Child img.s
63![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
64
background:none;
65
cursor:default;
66
}
67![](/Images/OutliningIndicators/None.gif)
68
#CategoryTree ul
69![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
70
margin:0 0 0 17px;
71
}
72
#CategoryTree img.s
73![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
74
width:34px;
75
height:18px;
76
}
77
#CategoryTree .Opened img.s
78![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
79
background:url(skin/opened.gif) no-repeat 0 1px;
80
}
81
#CategoryTree .Closed img.s
82![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
83
background:url(skin/closed.gif) no-repeat 0 1px;
84
}
85
#CategoryTree .Child img.s
86![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
87
background:url(skin/child.gif) no-repeat 13px 2px;
88
}
89![](/Images/OutliningIndicators/None.gif)
90
#CategoryTree
91![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
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![](/Images/OutliningIndicators/None.gif)
cs:
![](/Images/OutliningIndicators/ContractedBlock.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
using System;
2
using System.Collections;
3
using System.ComponentModel;
4
using System.Data;
5
using System.Drawing;
6
using System.Web;
7
using System.Web.SessionState;
8
using System.Web.UI;
9
using System.Web.UI.WebControls;
10
using System.Web.UI.HtmlControls;
11
using AjaxPro;
12
using System.Data.SqlClient;
13
using System.Configuration;
14![](/Images/OutliningIndicators/None.gif)
15
namespace tree_2
16![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
17
/// <summary>
18
/// tree 的摘要说明。
19
/// </summary>
20
public class tree : System.Web.UI.Page
21![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
22
private void Page_Load(object sender, System.EventArgs e)
23![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
24
AjaxPro.Utility.RegisterTypeForAjax(typeof(tree));
25
}
26![](/Images/OutliningIndicators/InBlock.gif)
27
private Random rand = new Random();
28![](/Images/OutliningIndicators/InBlock.gif)
29
[AjaxMethod()]
30
public DataSet GetSubCategory(int iCategoryID)
31![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
32
DataSet ds = new DataSet();
33![](/Images/OutliningIndicators/InBlock.gif)
34
SqlConnection conn =
35
new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
36
SqlCommand cmd = conn.CreateCommand();
37
cmd.CommandText = string.Format(
38
"SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}",
39
iCategoryID);
40
SqlDataAdapter da = new SqlDataAdapter(cmd);
41![](/Images/OutliningIndicators/InBlock.gif)
42
try
43![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
44
da.Fill(ds);
45
}
46
catch (SqlException)
47![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
48
}
49
finally
50![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
51
conn.Close();
52
}
53![](/Images/OutliningIndicators/InBlock.gif)
54
System.Threading.Thread.Sleep(500 + rand.Next(1000));
55![](/Images/OutliningIndicators/InBlock.gif)
56
return ds;
57
}
58![](/Images/OutliningIndicators/InBlock.gif)
59
60
#region Web 窗体设计器生成的代码
61
override protected void OnInit(EventArgs e)
62![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
63
//
64
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
65
//
66
InitializeComponent();
67
base.OnInit(e);
68
}
69
70
/// <summary>
71
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
72
/// 此方法的内容。
73
/// </summary>
74
private void InitializeComponent()
75![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
76
this.Load += new System.EventHandler(this.Page_Load);
77![](/Images/OutliningIndicators/InBlock.gif)
78
}
79
#endregion
80
}
81
}
82![](/Images/OutliningIndicators/None.gif)
注:
还需要一些结点的图片: 可以在网上找到...