費(fèi)話少說(shuō)，我們就開(kāi)始實(shí)現(xiàn)吧！
第一步，設(shè)計(jì)數(shù)據(jù)庫(kù)表。
為了實(shí)現(xiàn)無(wú)限級(jí)的樹(shù)狀層次結(jié)構(gòu)，我們可以設(shè)計(jì)下邊表結(jié)構(gòu)。
狀圖-表結(jié)構(gòu).GIF)
其中，SortId為分類(lèi)的ID；ParentSortId為上下文分類(lèi)的父類(lèi)Id，如果是各不相干的老祖宗（不同系列的根），其父類(lèi)Id可設(shè)為空；Descr為文本文明，將顯示在頁(yè)面上；ImageUrl是每個(gè)樹(shù)結(jié)點(diǎn)的文本的前置圖標(biāo)的圖片Url，此內(nèi)容是與控件的ImagesBaseUrl屬性相關(guān)的，也就是說(shuō)會(huì)從ImagesBaseUrl 屬性指定的URL開(kāi)始找這里的圖片。
測(cè)試數(shù)據(jù)如下：
狀圖-表數(shù)據(jù).GIF)
第二步，把新建工程并把一個(gè)TreeView控件和一個(gè)按鈕及兩個(gè)Label拖到WebForm上。如圖：
狀圖-設(shè)計(jì)時(shí).GIF)
第三步，設(shè)置TreeView屬性
控件的屬性太多不能一一介紹，其實(shí)很多屬性從名稱(chēng)上已經(jīng)能猜到是用來(lái)干嘛的了，嘿～具體每個(gè)屬性的說(shuō)明請(qǐng)查看文檔，這里就貼上前臺(tái)代碼以供參考。
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>數(shù)據(jù)驅(qū)動(dòng)的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>標(biāo)簽的屬性可以從VS的屬性編輯區(qū)找到相應(yīng)的項(xiàng)。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>數(shù)據(jù)驅(qū)動(dòng)的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
第四步，編寫(xiě)后臺(tái)代碼
這個(gè)嘛，不費(fèi)話太多了，代碼說(shuō)明一切吧�。ㄒ寻ㄊ录幚恚�
1//=======================================
2// 數(shù)據(jù)驅(qū)動(dòng)的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/// 數(shù)據(jù)驅(qū)動(dòng)的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 /// 生成樹(shù)
37 /// </summary>
38 private void buildTree()
39 {
40 //生成數(shù)據(jù)源 （這里我是用了企業(yè)庫(kù)，你也可以采用其它方式去生成，或者把這部分放到DAL層）
41 Database db = DatabaseFactory.CreateDatabase();
42 DataSet ds = db.ExecuteDataSet(CommandType.Text,"select * from Sort");
43
44 //建立關(guān)系
45 ds.Relations.Add("SortRelation", ds.Tables[0].Columns["SortId"], ds.Tables[0].Columns["ParentSortId"]);
46
47 //遍歷每行并根據(jù)數(shù)據(jù)行關(guān)系生成樹(shù)
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 /// 組裝子樹(shù)
61 /// </summary>
62 /// <param name="dbRow">數(shù)據(jù)行</param>
63 /// <param name="node">樹(shù)節(jié)點(diǎn)，將遞歸添加子節(jié)點(diǎn)</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 /// 生成樹(shù)節(jié)點(diǎn)
76 /// </summary>
77 /// <param name="text">節(jié)點(diǎn)顯示文本</param>
78 /// <param name="imageurl">節(jié)點(diǎn)前的圖片url</param>
79 /// <param name="expanded">是否展開(kāi)</param>
80 /// <returns>樹(shù)節(jié)點(diǎn)</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 窗體設(shè)計(jì)器生成的代碼
92 override protected void OnInit(EventArgs e)
93 {
94 //
95 // CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計(jì)器所必需的。
96 // InitializeComponent();
97 base.OnInit(e);
98 }
99
100 /// <summary>
101 /// 設(shè)計(jì)器支持所需的方法 - 不要使用代碼編輯器修改
102 /// 此方法的內(nèi)容。
103 /// </summary>
104 private void InitializeComponent()
105 {
106 //這里要注冊(cè)點(diǎn)選節(jié)點(diǎn)的事件處理程序
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 //節(jié)點(diǎn)點(diǎn)選事件處理
116 private void TreeView1_NodeSelected(object sender, ComponentArt.Web.UI.TreeViewNodeEventArgs e)
117 {
118 //通過(guò)e.Node.Text可以取得節(jié)點(diǎn)的顯示文本
119 this.Label1.Text= e.Node.Text;
120 }
121
122 //這個(gè)不用說(shuō)了，也可以把buildTree(); 放到Page_Load里面
123 private void btnShow_Click(object sender, System.EventArgs e)
124 {
125 buildTree();
126 }
127
128}
129
//=======================================2
// 數(shù)據(jù)驅(qū)動(dòng)的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/// 數(shù)據(jù)驅(qū)動(dòng)的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 /// 生成樹(shù)
37 /// </summary>
38 private void buildTree()
39 {
40 //生成數(shù)據(jù)源 （這里我是用了企業(yè)庫(kù)，你也可以采用其它方式去生成，或者把這部分放到DAL層）
41 Database db = DatabaseFactory.CreateDatabase();
42 DataSet ds = db.ExecuteDataSet(CommandType.Text,"select * from Sort");
43
44 //建立關(guān)系
45 ds.Relations.Add("SortRelation", ds.Tables[0].Columns["SortId"], ds.Tables[0].Columns["ParentSortId"]);
46
47 //遍歷每行并根據(jù)數(shù)據(jù)行關(guān)系生成樹(shù)
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 /// 組裝子樹(shù)
61 /// </summary>
62 /// <param name="dbRow">數(shù)據(jù)行</param>
63 /// <param name="node">樹(shù)節(jié)點(diǎn)，將遞歸添加子節(jié)點(diǎn)</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 /// 生成樹(shù)節(jié)點(diǎn)
76 /// </summary>
77 /// <param name="text">節(jié)點(diǎn)顯示文本</param>
78 /// <param name="imageurl">節(jié)點(diǎn)前的圖片url</param>
79 /// <param name="expanded">是否展開(kāi)</param>
80 /// <returns>樹(shù)節(jié)點(diǎn)</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 窗體設(shè)計(jì)器生成的代碼
92 override protected void OnInit(EventArgs e)
93 {
94 //
95 // CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計(jì)器所必需的。
96 // InitializeComponent();
97 base.OnInit(e);
98 }
99
100 /// <summary>
101 /// 設(shè)計(jì)器支持所需的方法 - 不要使用代碼編輯器修改
102 /// 此方法的內(nèi)容。
103 /// </summary>
104 private void InitializeComponent()
105 {
106 //這里要注冊(cè)點(diǎn)選節(jié)點(diǎn)的事件處理程序
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 //節(jié)點(diǎn)點(diǎn)選事件處理
116 private void TreeView1_NodeSelected(object sender, ComponentArt.Web.UI.TreeViewNodeEventArgs e)
117 {
118 //通過(guò)e.Node.Text可以取得節(jié)點(diǎn)的顯示文本
119 this.Label1.Text= e.Node.Text;
120 }
121
122 //這個(gè)不用說(shuō)了，也可以把buildTree(); 放到Page_Load里面
123 private void btnShow_Click(object sender, System.EventArgs e)
124 {
125 buildTree();
126 }
127
128}
129
效果圖：
狀圖-效果圖.GIF)
最后就是要提示一下，這套第三方控件的其它好些控件都有類(lèi)似的“動(dòng)態(tài)生成”支持，它們的工作原理也都大致相同的，概括地說(shuō)就是把數(shù)據(jù)從數(shù)據(jù)庫(kù)或者XML文檔里面讀出來(lái)，裝載到DataSet里面，然后通過(guò)相應(yīng)的方法將DataSet里面的數(shù)據(jù)“綁定”到控件中。另外就是提供學(xué)習(xí)這套控件的兩個(gè)法寶——“Samples”和“文檔”，它們可以幫助你迅速地把這套控件玩透。
世事并無(wú)兩全其美，其實(shí)在玩這套控件時(shí)也發(fā)現(xiàn)不少不足之處和Bug，歡迎朋友們一起來(lái)討論學(xué)習(xí)。因?yàn)闀r(shí)間關(guān)系就介紹到這里，希望能對(duì)剛接觸這個(gè)TreeView的或準(zhǔn)備想用這個(gè)TreeView的朋友有點(diǎn)兒幫助。