费话少说,我们就开始实现吧!
第一步,设计数据库表。
为了实现无限级的树状层次结构,我们可以设计下边表结构。
其中,SortId为分类的ID;ParentSortId为上下文分类的父类Id,如果是各不相干的老祖宗(不同系列的根),其父类Id可设为空;Descr为文本文明,将显示在页面上;ImageUrl是每个树结点的文本的前置图标的图片Url,此内容是与控件的ImagesBaseUrl属性相关的,也就是说会从ImagesBaseUrl 属性指定的URL开始找这里的图片。
测试数据如下:
第二步,把新建工程并把一个TreeView控件和一个按钮及两个Label拖到WebForm上。如图:
第三步,设置TreeView属性
控件的属性太多不能一一介绍,其实很多属性从名称上已经能猜到是用来干嘛的了,嘿~具体每个属性的说明请查看文档,这里就贴上前台代码以供参考。
1
<%@ Page Language="c#" AutoEventWireup="false" Inherits="WebForm1" CodeBehind="DbTreeDemo.aspx.cs" %>
2
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
<HTML lang="EN">
5
<HEAD>
6
<title>数据驱动的TreeView演示</title>
7
<link href="treeStyle.css" type="text/css" rel="stylesheet">
8
</HEAD>
9
<body>
10
<form id="Form1" method="post" runat="server">
11
<div class="DemoArea"><FONT face="宋体"></FONT>
12
</div>
13
<P>
14
<asp:Button id="btnShow" runat="server" Text="显示"></asp:Button>
15
<ComponentArt:TreeView id="TreeView1" Height="320" Width="220" DragAndDropEnabled="true" NodeEditingEnabled="false"
16
KeyboardEnabled="true" CssClass="TreeView" NodeCssClass="TreeNode" SelectedNodeCssClass="SelectedTreeNode"
17
HoverNodeCssClass="HoverTreeNode" NodeEditCssClass="NodeEdit" LineImageWidth="19" LineImageHeight="20"
18
DefaultImageWidth="16" DefaultImageHeight="16" ItemSpacing="0" NodeLabelPadding="3" ShowLines="true"
19
LineImagesFolderUrl="images/lines/" ImagesBaseUrl="images/" EnableViewState="true" runat="server" AutoPostBackOnSelect="True"></ComponentArt:TreeView></P>
20
<P>
21
<asp:Label id="Label2" runat="server">选择了:</asp:Label>
22
<asp:Label id="Label1" runat="server">Label</asp:Label></P>
23
</form>
24
</body>
25
</HTML>
26![]()
其中<ComponentArt:TreeView>标签的属性可以从VS的属性编辑区找到相应的项。2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
第四步,编写后台代码
这个嘛,不费话太多了,代码说明一切吧!(已包括事件处理)
1
//=======================================
2
// 数据驱动的TreeView演示
3
//=======================================
4
// by Ryu666 in 2005/12/15 QQ:126940
5
//=======================================
6
using System;
7
using System.Collections;
8
using System.ComponentModel;
9
using System.Data;
10
using System.Drawing;
11
using System.Web;
12
using System.Web.SessionState;
13
using System.Web.UI;
14
using System.Web.UI.WebControls;
15
using System.Web.UI.HtmlControls;
16![]()
17
using Microsoft.Practices.EnterpriseLibrary.Data;
18
using ComponentArt.Web.UI;
19![]()
20
/// <summary>
21
/// 数据驱动的TreeView演示.
22
/// </summary>
23
public class WebForm1 : System.Web.UI.Page
24
{
25
protected System.Web.UI.WebControls.Label Label1;
26
protected System.Web.UI.WebControls.Button btnShow;
27
protected System.Web.UI.WebControls.Label Label2;
28
protected ComponentArt.Web.UI.TreeView TreeView1;
29![]()
30
private void Page_Load(object sender, System.EventArgs e)
31
{
32![]()
33
}
34![]()
35
/// <summary>
36
/// 生成树
37
/// </summary>
38
private void buildTree()
39
{
40
//生成数据源 (这里我是用了企业库,你也可以采用其它方式去生成,或者把这部分放到DAL层)
41
Database db = DatabaseFactory.CreateDatabase();
42
DataSet ds = db.ExecuteDataSet(CommandType.Text,"select * from Sort");
43
44
//建立关系
45
ds.Relations.Add("SortRelation", ds.Tables[0].Columns["SortId"], ds.Tables[0].Columns["ParentSortId"]);
46![]()
47
//遍历每行并根据数据行关系生成树
48
foreach(DataRow dbRow in ds.Tables[0].Rows)
49
{
50
if(dbRow.IsNull("ParentSortId"))
51
{
52
ComponentArt.Web.UI.TreeViewNode newNode = CreateNode(dbRow["Descr"].ToString(), dbRow["ImageUrl"].ToString(), true);
53
TreeView1.Nodes.Add(newNode);
54
PopulateSubTree(dbRow, newNode);
55
}
56
}
57
}
58![]()
59
/// <summary>
60
/// 组装子树
61
/// </summary>
62
/// <param name="dbRow">数据行</param>
63
/// <param name="node">树节点,将递归添加子节点</param>
64
private void PopulateSubTree(DataRow dbRow, ComponentArt.Web.UI.TreeViewNode node)
65
{
66
foreach (DataRow childRow in dbRow.GetChildRows("SortRelation"))
67
{
68
ComponentArt.Web.UI.TreeViewNode childNode = CreateNode(childRow["Descr"].ToString(), childRow["ImageUrl"].ToString(), true);
69
node.Nodes.Add(childNode);
70
PopulateSubTree(childRow, childNode);
71
}
72
}
73![]()
74
/// <summary>
75
/// 生成树节点
76
/// </summary>
77
/// <param name="text">节点显示文本</param>
78
/// <param name="imageurl">节点前的图片url</param>
79
/// <param name="expanded">是否展开</param>
80
/// <returns>树节点</returns>
81
private TreeViewNode CreateNode(string text, string imageurl, bool expanded)
82
{
83
ComponentArt.Web.UI.TreeViewNode node = new ComponentArt.Web.UI.TreeViewNode();
84
node.Text = text;
85
node.ImageUrl = imageurl;
86
node.Expanded = expanded;
87
return node;
88
}
89![]()
90![]()
91
Web 窗体设计器生成的代码
114
115
//节点点选事件处理
116
private void TreeView1_NodeSelected(object sender, ComponentArt.Web.UI.TreeViewNodeEventArgs e)
117
{
118
//通过e.Node.Text可以取得节点的显示文本
119
this.Label1.Text= e.Node.Text;
120
}
121![]()
122
//这个不用说了,也可以把buildTree(); 放到Page_Load里面
123
private void btnShow_Click(object sender, System.EventArgs e)
124
{
125
buildTree();
126
}
127![]()
128
}
129![]()
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
效果图:
最后就是要提示一下,这套第三方控件的其它好些控件都有类似的“动态生成”支持,它们的工作原理也都大致相同的,概括地说就是把数据从数据库或者XML文档里面读出来,装载到DataSet里面,然后通过相应的方法将DataSet里面的数据“绑定”到控件中。另外就是提供学习这套控件的两个法宝——“Samples”和“文档”,它们可以帮助你迅速地把这套控件玩透。