使用ComponentArt.WebUI.for.Asp.net.3.0的TreeView控件

　回到今天的主题，使用TreeView控件可以很方便地实现无限级的树状结构管理。适用于无限级商品分类（类别）管理、员工类型管理、地区划分等应用场合。

　　费话少说，我们就开始实现吧！

第一步，设计数据库表。
　　为了实现无限级的树状层次结构，我们可以设计下边表结构。

　　其中，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的属性编辑区找到相应的项。

第四步，编写后台代码
这个嘛，不费话太多了，代码说明一切吧！（已包括事件处理）

  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 窗体设计器生成的代码#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”和“文档”，它们可以帮助你迅速地把这套控件玩透。