費話少說，我們就開始實現吧！
第一步，設計數據庫表。
為了實現無限級的樹狀層次結構，我們可以設計下邊表結構。
其中，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<%@ 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
第四步，編寫后臺代碼
這個嘛，不費話太多了，代碼說明一切吧�。ㄒ寻ㄊ录幚恚�
1//=======================================
2// 數據驅動的TreeView演示
3//=======================================
4// by Ryu666 in 2005/12/15 QQ:126940
5//=======================================
6using System;
7using System.Collections;
8using System.ComponentModel;
9using System.Data;
10using System.Drawing;
11using System.Web;
12using System.Web.SessionState;
13using System.Web.UI;
14using System.Web.UI.WebControls;
15using System.Web.UI.HtmlControls;
16
17using Microsoft.Practices.EnterpriseLibrary.Data;
18using ComponentArt.Web.UI;
19
20/// <summary>
21/// 數據驅動的TreeView演示.
22/// </summary>
23public 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 #region Web 窗體設計器生成的代碼
92 override protected void OnInit(EventArgs e)
93 {
94 //
95 // CODEGEN: 該調用是 ASP.NET Web 窗體設計器所必需的。
96 // InitializeComponent();
97 base.OnInit(e);
98 }
99
100 /// <summary>
101 /// 設計器支持所需的方法 - 不要使用代碼編輯器修改
102 /// 此方法的內容。
103 /// </summary>
104 private void InitializeComponent()
105 {
106 //這里要注冊點選節點的事件處理程序
107 this.TreeView1.NodeSelected += new ComponentArt.Web.UI.TreeView.NodeSelectedEventHandler(this.TreeView1_NodeSelected);
108
109 this.btnShow.Click += new System.EventHandler(this.btnShow_Click);
110 this.Load += new System.EventHandler(this.Page_Load);
111
112 }
113 #endregion
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
// 數據驅動的TreeView演示3
//=======================================4
// by Ryu666 in 2005/12/15 QQ:1269405
//=======================================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.Page24{
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 #region Web 窗體設計器生成的代碼
92 override protected void OnInit(EventArgs e)
93 {
94 //
95 // CODEGEN: 該調用是 ASP.NET Web 窗體設計器所必需的。
96 // InitializeComponent();
97 base.OnInit(e);
98 }
99
100 /// <summary>
101 /// 設計器支持所需的方法 - 不要使用代碼編輯器修改
102 /// 此方法的內容。
103 /// </summary>
104 private void InitializeComponent()
105 {
106 //這里要注冊點選節點的事件處理程序
107 this.TreeView1.NodeSelected += new ComponentArt.Web.UI.TreeView.NodeSelectedEventHandler(this.TreeView1_NodeSelected);
108
109 this.btnShow.Click += new System.EventHandler(this.btnShow_Click);
110 this.Load += new System.EventHandler(this.Page_Load);
111
112 }
113 #endregion
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
效果圖：
最后就是要提示一下，這套第三方控件的其它好些控件都有類似的“動態生成”支持，它們的工作原理也都大致相同的，概括地說就是把數據從數據庫或者XML文檔里面讀出來，裝載到DataSet里面，然后通過相應的方法將DataSet里面的數據“綁定”到控件中。另外就是提供學習這套控件的兩個法寶——“Samples”和“文檔”，它們可以幫助你迅速地把這套控件玩透。
世事并無兩全其美，其實在玩這套控件時也發現不少不足之處和Bug，歡迎朋友們一起來討論學習。因為時間關系就介紹到這里，希望能對剛接觸這個TreeView的或準備想用這個TreeView的朋友有點兒幫助。