ComponentArt.WebUI.for.Asp.net.3.0確實(shí)是套很Cool的第三方WebUI控件，對于還沒(méi)轉移到.Net Framework2.0的朋友來(lái)講，使用它能夠為你的ASP.NET UI增色不少。3.0包含了AJAX技術(shù)，而且它是含源代碼的，對于怕受到廠(chǎng)商限制而不敢使用第三方控件的朋友來(lái)可算是個(gè)福音。
它是一套知名度挺高的第三方控件，但對于使不使用第三方控件的討論至今仍是爭論不休。今天的目的只是介紹一下它并通過(guò)一個(gè)簡(jiǎn)單的例子演示一下怎么使它們跑起來(lái)，至于用不用它看你自己的取舍了。
ComponentArt.WebUI.for.Asp.net.3.0 由11組控件組成，其中包括：網(wǎng)格(DataGrid)、樹(shù)、菜單、折疊導航(類(lèi)ＱＱ)等。有興趣的朋友可以安裝一下，每個(gè)控件都有演示，這里不一一介紹了?？纯磶讉€(gè)截圖吧
回到今天的主題，使用TreeView控件可以很方便地實(shí)現無(wú)限級的樹(shù)狀結構管理。適用于無(wú)限級商品分類(lèi)（類(lèi)別）管理、員工類(lèi)型管理、地區劃分等應用場(chǎng)合。
費話(huà)少說(shuō)，我們就開(kāi)始實(shí)現吧！
第一步，設計數據庫表。
為了實(shí)現無(wú)限級的樹(shù)狀層次結構，我們可以設計下邊表結構。
其中，SortId為分類(lèi)的ID；ParentSortId為上下文分類(lèi)的父類(lèi)Id，如果是各不相干的老祖宗（不同系列的根），其父類(lèi)Id可設為空；Descr為文本文明，將顯示在頁(yè)面上；ImageUrl是每個(gè)樹(shù)結點(diǎn)的文本的前置圖標的圖片Url，此內容是與控件的ImagesBaseUrl屬性相關(guān)的，也就是說(shuō)會(huì )從ImagesBaseUrl 屬性指定的URL開(kāi)始找這里的圖片。
測試數據如下：
第二步，把新建工程并把一個(gè)TreeView控件和一個(gè)按鈕及兩個(gè)Label拖到WebForm上。如圖：
第三步，設置TreeView屬性
控件的屬性太多不能一一介紹，其實(shí)很多屬性從名稱(chēng)上已經(jīng)能猜到是用來(lái)干嘛的了，嘿～具體每個(gè)屬性的說(shuō)明請查看文檔，這里就貼上前臺代碼以供參考。
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>數據驅動(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>標簽的屬性可以從VS的屬性編輯區找到相應的項。
第四步，編寫(xiě)后臺代碼
這個(gè)嘛，不費話(huà)太多了，代碼說(shuō)明一切吧?。ㄒ寻ㄊ录幚恚?br>
1//=======================================
2// 數據驅動(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/// 數據驅動(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 //生成數據源 （這里我是用了企業(yè)庫，你也可以采用其它方式去生成，或者把這部分放到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 //遍歷每行并根據數據行關(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">數據行</param>
63 /// <param name="node">樹(shù)節點(diǎn)，將遞歸添加子節點(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ù)節點(diǎn)
76 /// </summary>
77 /// <param name="text">節點(diǎn)顯示文本</param>
78 /// <param name="imageurl">節點(diǎn)前的圖片url</param>
79 /// <param name="expanded">是否展開(kāi)</param>
80 /// <returns>樹(shù)節點(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 Web 窗體設計器生成的代碼#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 //這里要注冊點(diǎn)選節點(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 //節點(diǎn)點(diǎn)選事件處理
116 private void TreeView1_NodeSelected(object sender, ComponentArt.Web.UI.TreeViewNodeEventArgs e)
117 {
118 //通過(guò)e.Node.Text可以取得節點(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 效果圖：
最后就是要提示一下，這套第三方控件的其它好些控件都有類(lèi)似的“動(dòng)態(tài)生成”支持，它們的工作原理也都大致相同的，概括地說(shuō)就是把數據從數據庫或者XML文檔里面讀出來(lái)，裝載到DataSet里面，然后通過(guò)相應的方法將DataSet里面的數據“綁定”到控件中。另外就是提供學(xué)習這套控件的兩個(gè)法寶——“Samples”和“文檔”，它們可以幫助你迅速地把這套控件玩透。
世事并無(wú)兩全其美，其實(shí)在玩這套控件時(shí)也發(fā)現不少不足之處和Bug，歡迎朋友們一起來(lái)討論學(xué)習。因為時(shí)間關(guān)系就介紹到這里，希望能對剛接觸這個(gè)TreeView的或準備想用這個(gè)TreeView的朋友有點(diǎn)兒幫助。
