使用ComponentArt.WebUI.for.Asp.net.3.0的TreeView控件实现数据驱动的无限级分类管理[图文教程]

　　ComponentArt.WebUI.for.Asp.net.3.0确实是套很Cool的第三方WebUI控件，对于还没转移到.Net Framework2.0的朋友来讲，使用它能够为你的ASP.NET UI增色不少。3.0包含了AJAX技术，而且它是含源代码的，对于怕受到厂商限制而不敢使用第三方控件的朋友来可算是个福音。

　　它是一套知名度挺高的第三方控件，但对于使不使用第三方控件的讨论至今仍是争论不休。今天的目的只是介绍一下它并通过一个简单的例子演示一下怎么使它们跑起来，至于用不用它看你自己的取舍了。

　　ComponentArt.WebUI.for.Asp.net.3.0 由11组控件组成，其中包括：网格(DataGrid)、树、菜单、折叠导航(类ＱＱ)等。有兴趣的朋友可以安装一下，每个控件都有演示，这里不一一介绍了。看看几个截图吧

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

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

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

　　其中，SortId为分类的ID；ParentSortId为上下文分类的父类Id，如果是各不相干的老祖宗（不同系列的根），其父类Id可设为空；Descr为文本文明，将显示在页面上；ImageUrl是每个树结点的文本的前置图标的图片Url，此内容是与控件的ImagesBaseUrl属性相关的，也就是说会从ImagesBaseUrl 属性指定的URL开始找这里的图片。

　　测试数据如下：

第二步，把新建工程并把一个TreeView控件和一个按钮及两个Label拖到WebForm上。如图：

第三步，设置TreeView属性
控件的属性太多不能一一介绍，其实很多属性从名称上已经能猜到是用来干嘛的了，嘿～具体每个属性的说明请查看文档，这里就贴上前台代码以供参考。

<%@ 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

</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

// 数据驱动的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

using Microsoft.Practices.EnterpriseLibrary.Data;
18

using ComponentArt.Web.UI;
19

/// <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

private void Page_Load(object sender, System.EventArgs e)
31

{
32

}
34

/// <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

//建立关系
45

ds.Relations.Add("SortRelation", ds.Tables[0].Columns["SortId"], ds.Tables[0].Columns["ParentSortId"]);
46

//遍历每行并根据数据行关系生成树
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

/// <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

/// <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

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

效果图：

　　最后就是要提示一下，这套第三方控件的其它好些控件都有类似的“动态生成”支持，它们的工作原理也都大致相同的，概括地说就是把数据从数据库或者XML文档里面读出来，装载到DataSet里面，然后通过相应的方法将DataSet里面的数据“绑定”到控件中。另外就是提供学习这套控件的两个法宝——“Samples”和“文档”，它们可以帮助你迅速地把这套控件玩透。

　　世事并无两全其美，其实在玩这套控件时也发现不少不足之处和Bug，欢迎朋友们一起来讨论学习。因为时间关系就介绍到这里，希望能对刚接触这个TreeView的或准备想用这个TreeView的朋友有点儿帮助。

posted @ 2005-12-15 23:24 黄耀辉阅读(7614) 评论(25) 编辑收藏举报

刷新页面返回顶部

Ryu666's IT乐园

“软件设计是我的挚爱。产品是辅作用，我更享受制造过程。” ——黄耀辉

使用ComponentArt.WebUI.for.Asp.net.3.0的TreeView控件实现数据驱动的无限级分类管理[图文教程]

公告