原创: The tree based on Ajax --koma
aspx(js included)
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
{21
var li_father = document.getElementById("li_" + iCategoryID);22
if (li_father.getElementsByTagName("li").length > 0) 23
{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
{37
var dt = response.value.Tables[0];38
if (dt.Rows.length > 0)39
{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
{46
if (dt.Rows[i].IsChild == 1) //叶子节点47
{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
else62
{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
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
{93
var li_father = document.getElementById("li_" + iCategoryID);94
if (li_father.className == "Closed")95
{96
li_father.className = "Opened";97
}98
else99
{100
li_father.className = "Closed";101
} 102
}103
104
function switchNote(iCategoryID, show)105
{106
var li_father = document.getElementById("li_" + iCategoryID);107
if (show)108
{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
else129
{130
var ul = document.getElementById("ul_note_" + iCategoryID);131
if (ul)132
{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
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
cs:
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
15
namespace tree_216
{17
/// <summary>18
/// tree 的摘要说明。19
/// </summary>20
public class tree : System.Web.UI.Page21
{22
private void Page_Load(object sender, System.EventArgs e)23
{24
AjaxPro.Utility.RegisterTypeForAjax(typeof(tree));25
}26
27
private Random rand = new Random();28
29
[AjaxMethod()]30
public DataSet GetSubCategory(int iCategoryID)31
{32
DataSet ds = new DataSet();33
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
42
try43
{44
da.Fill(ds);45
}46
catch (SqlException)47
{48
}49
finally50
{51
conn.Close();52
}53
54
System.Threading.Thread.Sleep(500 + rand.Next(1000));55
56
return ds;57
}58
59
60
#region Web 窗体设计器生成的代码61
override protected void OnInit(EventArgs e)62
{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
{ 76
this.Load += new System.EventHandler(this.Page_Load);77
78
}79
#endregion80
}81
}82
注:
还需要一些结点的图片: 可以在网上找到...
