使用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)、树、菜单、折叠导航(类QQ)等。有兴趣的朋友可以安装一下,每个控件都有演示,这里不一一介绍了。看看几个截图吧
ComponentArt%20Web.UI.GIF
indexVisualGrid.gif
indexVisualMenu.gif
indexVisualNavbar.gif
indexVisualTree.gif
  回到今天的主题,使用TreeView控件可以很方便地实现无限级的树状结构管理。适用于无限级商品分类(类别)管理、员工类型管理、地区划分等应用场合。

  费话少说,我们就开始实现吧!

第一步,设计数据库表。
  为了实现无限级的树状层次结构,我们可以设计下边表结构。
%E6%A0%91%E7%8A%B6%E5%9B%BE-%E8%A1%A8%E7%BB%93%E6%9E%84.GIF
  其中,SortId为分类的ID;ParentSortId为上下文分类的父类Id,如果是各不相干的老祖宗(不同系列的根),其父类Id可设为空;Descr为文本文明,将显示在页面上;ImageUrl是每个树结点的文本的前置图标的图片Url,此内容是与控件的ImagesBaseUrl属性相关的,也就是说会从ImagesBaseUrl 属性指定的URL开始找这里的图片。

  测试数据如下:
%E6%A0%91%E7%8A%B6%E5%9B%BE-%E8%A1%A8%E6%95%B0%E6%8D%AE.GIF

第二步,把新建工程并把一个TreeView控件和一个按钮及两个Label拖到WebForm上。如图:
%E6%A0%91%E7%8A%B6%E5%9B%BE-%E8%AE%BE%E8%AE%A1%E6%97%B6.GIF

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

 1 ExpandedBlockStart.gif ContractedBlock.gif <% dot.gif @ Page Language="c#"  AutoEventWireup="false" Inherits="WebForm1" CodeBehind="DbTreeDemo.aspx.cs"  %>
 2 ExpandedBlockStart.gifContractedBlock.gif <% dot.gif @ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI"  %>
 3 None.gif <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
 4 None.gif < HTML  lang ="EN" >
 5 None.gif     < HEAD >
 6 None.gif         < title >数据驱动的TreeView演示 </ title >
 7 None.gif         < link  href ="treeStyle.css"  type ="text/css"  rel ="stylesheet" >
 8 None.gif     </ HEAD >
 9 None.gif     < body >
10 None.gif         < form  id ="Form1"  method ="post"  runat ="server" >
11 None.gif             < div  class ="DemoArea" >< FONT  face ="宋体" ></ FONT >
12 None.gif             </ div >
13 None.gif             < P >
14 None.gif                 < asp:Button  id ="btnShow"  runat ="server"  Text ="显示" ></ asp:Button >
15 None.gif                 < ComponentArt:TreeView  id ="TreeView1"  Height ="320"  Width ="220"  DragAndDropEnabled ="true"  NodeEditingEnabled ="false"
16 None.gif                    KeyboardEnabled ="true"  CssClass ="TreeView"  NodeCssClass ="TreeNode"  SelectedNodeCssClass ="SelectedTreeNode"
17 None.gif                    HoverNodeCssClass ="HoverTreeNode"  NodeEditCssClass ="NodeEdit"  LineImageWidth ="19"  LineImageHeight ="20"
18 None.gif                    DefaultImageWidth ="16"  DefaultImageHeight ="16"  ItemSpacing ="0"  NodeLabelPadding ="3"  ShowLines ="true"
19 None.gif                    LineImagesFolderUrl ="images/lines/"  ImagesBaseUrl ="images/"  EnableViewState ="true"  runat ="server"  AutoPostBackOnSelect ="True" ></ ComponentArt:TreeView ></ P >
20 None.gif             < P >
21 None.gif                 < asp:Label  id ="Label2"  runat ="server" > 选择了: </ asp:Label >
22 None.gif                 < asp:Label  id ="Label1"  runat ="server" > Label </ asp:Label ></ P >
23 None.gif         </ form >
24 None.gif     </ body >
25 None.gif </ HTML >
26 None.gif
其中<ComponentArt:TreeView>标签的属性可以从VS的属性编辑区找到相应的项。

第四步,编写后台代码
这个嘛,不费话太多了,代码说明一切吧!(已包括事件处理)
  1 None.gif // =======================================
  2 None.gif //  数据驱动的TreeView演示
  3 None.gif // =======================================
  4 None.gif //  by Ryu666 in 2005/12/15  QQ:126940
  5 None.gif // =======================================
  6 None.gif using  System;
  7 None.gif using  System.Collections;
  8 None.gif using  System.ComponentModel;
  9 None.gif using  System.Data;
 10 None.gif using  System.Drawing;
 11 None.gif using  System.Web;
 12 None.gif using  System.Web.SessionState;
 13 None.gif using  System.Web.UI;
 14 None.gif using  System.Web.UI.WebControls;
 15 None.gif using  System.Web.UI.HtmlControls;
 16 None.gif
 17 None.gif using  Microsoft.Practices.EnterpriseLibrary.Data;
 18 None.gif using  ComponentArt.Web.UI;
 19 None.gif
 20 ExpandedBlockStart.gifContractedBlock.gif /**/ /// <summary>
 21InBlock.gif/// 数据驱动的TreeView演示.
 22ExpandedBlockEnd.gif/// </summary>

 23 None.gif public   class  WebForm1 : System.Web.UI.Page
 24 ExpandedBlockStart.gifContractedBlock.gif dot.gif {
 25InBlock.gif    protected System.Web.UI.WebControls.Label Label1;
 26InBlock.gif    protected System.Web.UI.WebControls.Button btnShow;
 27InBlock.gif    protected System.Web.UI.WebControls.Label Label2;
 28InBlock.gif    protected ComponentArt.Web.UI.TreeView TreeView1; 
 29InBlock.gif
 30InBlock.gif    private void Page_Load(object sender, System.EventArgs e)
 31ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
 32InBlock.gif
 33ExpandedSubBlockEnd.gif    }

 34InBlock.gif
 35ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//// <summary>
 36InBlock.gif    /// 生成树
 37ExpandedSubBlockEnd.gif    /// </summary>

 38InBlock.gif    private void buildTree()
 39ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
 40InBlock.gif        //生成数据源 (这里我是用了企业库,你也可以采用其它方式去生成,或者把这部分放到DAL层)
 41InBlock.gif        Database db = DatabaseFactory.CreateDatabase();
 42InBlock.gif        DataSet ds = db.ExecuteDataSet(CommandType.Text,"select * from Sort");
 43InBlock.gif    
 44InBlock.gif        //建立关系
 45InBlock.gif        ds.Relations.Add("SortRelation", ds.Tables[0].Columns["SortId"], ds.Tables[0].Columns["ParentSortId"]);
 46InBlock.gif
 47InBlock.gif        //遍历每行并根据数据行关系生成树
 48InBlock.gif        foreach(DataRow dbRow in ds.Tables[0].Rows)
 49ExpandedSubBlockStart.gifContractedSubBlock.gif        dot.gif{
 50InBlock.gif            if(dbRow.IsNull("ParentSortId"))
 51ExpandedSubBlockStart.gifContractedSubBlock.gif            dot.gif{                                             
 52InBlock.gif                ComponentArt.Web.UI.TreeViewNode newNode = CreateNode(dbRow["Descr"].ToString(), dbRow["ImageUrl"].ToString(), true);
 53InBlock.gif                TreeView1.Nodes.Add(newNode);
 54InBlock.gif                PopulateSubTree(dbRow, newNode);
 55ExpandedSubBlockEnd.gif            }

 56ExpandedSubBlockEnd.gif        }

 57ExpandedSubBlockEnd.gif    }

 58InBlock.gif
 59ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//// <summary>
 60InBlock.gif    /// 组装子树
 61InBlock.gif    /// </summary>
 62InBlock.gif    /// <param name="dbRow">数据行</param>
 63ExpandedSubBlockEnd.gif    /// <param name="node">树节点,将递归添加子节点</param>

 64InBlock.gif    private void PopulateSubTree(DataRow dbRow, ComponentArt.Web.UI.TreeViewNode node)
 65ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
 66InBlock.gif        foreach (DataRow childRow in dbRow.GetChildRows("SortRelation"))
 67ExpandedSubBlockStart.gifContractedSubBlock.gif        dot.gif{                                    
 68InBlock.gif            ComponentArt.Web.UI.TreeViewNode childNode = CreateNode(childRow["Descr"].ToString(), childRow["ImageUrl"].ToString(), true);
 69InBlock.gif            node.Nodes.Add(childNode);
 70InBlock.gif            PopulateSubTree(childRow, childNode);
 71ExpandedSubBlockEnd.gif        }

 72ExpandedSubBlockEnd.gif    }

 73InBlock.gif
 74ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//// <summary>
 75InBlock.gif    /// 生成树节点
 76InBlock.gif    /// </summary>
 77InBlock.gif    /// <param name="text">节点显示文本</param>
 78InBlock.gif    /// <param name="imageurl">节点前的图片url</param>
 79InBlock.gif    /// <param name="expanded">是否展开</param>
 80ExpandedSubBlockEnd.gif    /// <returns>树节点</returns>

 81InBlock.gif    private TreeViewNode CreateNode(string text, string imageurl, bool expanded)
 82ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
 83InBlock.gif        ComponentArt.Web.UI.TreeViewNode node = new ComponentArt.Web.UI.TreeViewNode();
 84InBlock.gif        node.Text = text; 
 85InBlock.gif        node.ImageUrl = imageurl; 
 86InBlock.gif        node.Expanded = expanded;
 87InBlock.gif        return node;
 88ExpandedSubBlockEnd.gif    }

 89InBlock.gif
 90InBlock.gif
 91ContractedSubBlock.gifExpandedSubBlockStart.gif    Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
 92InBlock.gif    override protected void OnInit(EventArgs e)
 93ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
 94InBlock.gif            //
 95InBlock.gif            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
 96InBlock.gif            //        InitializeComponent();
 97InBlock.gif        base.OnInit(e);
 98ExpandedSubBlockEnd.gif    }

 99InBlock.gif    
100ExpandedSubBlockStart.gifContractedSubBlock.gif        /**//// <summary>
101InBlock.gif        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
102InBlock.gif        /// 此方法的内容。
103ExpandedSubBlockEnd.gif        /// </summary>

104InBlock.gif    private void InitializeComponent()
105ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{   
106InBlock.gif                //这里要注册点选节点的事件处理程序
107InBlock.gif        this.TreeView1.NodeSelected += new ComponentArt.Web.UI.TreeView.NodeSelectedEventHandler(this.TreeView1_NodeSelected);
108InBlock.gif
109InBlock.gif        this.btnShow.Click += new System.EventHandler(this.btnShow_Click);
110InBlock.gif        this.Load += new System.EventHandler(this.Page_Load);
111InBlock.gif
112ExpandedSubBlockEnd.gif    }

113ExpandedSubBlockEnd.gif    #endregion

114InBlock.gif        
115InBlock.gif        //节点点选事件处理
116InBlock.gif    private void TreeView1_NodeSelected(object sender, ComponentArt.Web.UI.TreeViewNodeEventArgs e)
117ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
118InBlock.gif        //通过e.Node.Text可以取得节点的显示文本
119InBlock.gif        this.Label1.Text= e.Node.Text;
120ExpandedSubBlockEnd.gif    }

121InBlock.gif
122InBlock.gif        //这个不用说了,也可以把buildTree(); 放到Page_Load里面
123InBlock.gif    private void btnShow_Click(object sender, System.EventArgs e)
124ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
125InBlock.gif        buildTree(); 
126ExpandedSubBlockEnd.gif    }

127InBlock.gif
128ExpandedBlockEnd.gif}

129 None.gif

效果图:
%E6%A0%91%E7%8A%B6%E5%9B%BE-%E6%95%88%E6%9E%9C%E5%9B%BE.GIF

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

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


转载于:https://www.cnblogs.com/Ryu666/archive/2005/12/15/294727.html

漂亮的ComponentArtWebUI及Demo源码 产品特征: 先进的用户界面控件套装:为高Web应用程序开发提供了16个优质的用户界面控件。 专为ASP.NET而设计:为三个先进且更强大的框架而设计:ASP.NET 1.0, ASP.NET 2.0和ASP.NET AJAX。 强大的客户端呈现技术:行业中最先进的Web用户界面技术。 深入整合ASP.NET AJAX:最理想的完全应用AJAX框架的控件。 全面的帮助文档和技术支持:提供了完善的产品在线帮助文档和全面的技术支持资源。 企业服务和培训:为企业项目开发定制专门的产品咨询和培训服务。 灵活的产品授权:针对开发者,服务和企业应用提供不同的授权方式。 ComponentArt Web.UI 2007.1 更新信息 ComponentArt Web.UI 2007.1 版本中发布了三个最新的控件: ToolBar for ASP.NET ComboBox for ASP.NET Dialog for ASP.NET 以下为Web.UI组件2007.1版本中新增的功能特征: ComponentArt Grid 可以在Callback模式中缓存页面 (CallbackCachingEnabled和CallbackCacheSize属性)。 可在Callback模式中预加载页面到缓存中 (CallbackCacheLookAhead属性)。 页面在滑动条经过时可提取页面 (SliderFetchDelay属性)。 客户端滚动事件。 客户端beforeCallback事件。 ColumnResizeRedistributeWidth属性用于控制缩放状态。 ComponentArt Menu 引入(已选)checking和(未选)unchecking项的概念。允许菜单项成为复选框或者单元按钮。 引入(图标透明度)IconVisibility的概念。可使图标只在该项被选中或该项根目录时显示。 添加更多对上下文菜单扩展的控制:(TopGroupExpandDirection, TopGroupExpandOffsetX, TopGroupExpandOffsetY)。 增加了ExpandDisabledItems的布尔值属性。 改进了IE7中的元素覆盖运算法则,优化其执行性能。 ComponentArt MultiPage 增加了IE转换效果 (Transition, TransitionDuration属性)。 Web.UI 2007.1 版本没有进行整体框架的改变,只是在Web.UI 2006.2的基础上进行了改进,所以通过最新的ComponentArt.Web.UI.dll可以很方便的对之前的应用程序进行编译。 ComponentArt Web.UI是全球知名的ASP.NET用户界面控件包,它提供了ComponentArt独特的界面呈现技术,支持强大的AJAX技术,可以为您提供最先进的ASP.NET Web用户界面。ComponentArt Web.UI专为ASP.NET框架设计,它包含16个支持AJAX技术的优质用户界面控件,并可应用在ASP.NET 1.0, ASP.NET 2.0, ASP.NET AJAX框架中。 2008年3月27日,专注于ASP.NET Web.UI及Charting控件开发的ComponentArt又发布了Web.UI的最一代版本:2008.1。该版本有四个框架平台:ASP.NET 1.0、ASP.NET 2.0、ASP.NET Ajax,还有当然是最新的.NET框架支持的ASP.NET 3.5了。 2008.1不仅对其代码的运行效率进行了优化,还最增了一个大家期盼已久的成员:Upload。上传空间虽已不是罕见的东东,可是ComponentArt提供的这款不会让你和你的开发团队失望的。 更主要的是ASP.NET 3.5的版本的发布的,同样,特性和功能都具备的同时,也加入了对LINQ的高度支持。这样,ASP.NET 3.5的开发人员也可以享用到这份大餐喽~ Advanced User Interface Control Suite: Includes 19 Premium User Interface controls for development of sophisticated web applications. Built for ASP.NET: Available in four progressively more powerful framework builds: ASP.NET 1.0, ASP.NET 2.0, ASP.NET AJAX and ASP.NET 3.5. Powerful Client-side Rendering Technology: Featuring the most advanced web user interface technology in the industry. Deepest ASP.NET AJAX Integration: The first true controls to fully exploit the most advanced AJAX framework available. Comprehensive Documentation and Support: Featuring complete product documentation online and all-inclusive technical support resources. Enterprise Consulting and Training: Customized consulting and training services are offered to support Enterprise development projects involving larger teams of developers. Flexible Licensing: Available at Developer, Subscription and Enterprise levels. ComponentArt Web.UI 包含以下用户界面控件 Calendar (日历) Grid (表格) Rotator (旋转器) TabStrip (标签) CallBack (回调) Menu (菜单) SiteMap (地图) ToolBar (工具条) ComboBox (组合框) MultiPage (分页) Snap (抓取) TreeView (树形列表) Dialog (对话框) NavBar (导航条) Splitter (框架分离) WebChart Lite (图表) 如果涉及到安装序列号,请填:3JKX6-YJW6X-GJJDP app_data为应用到的Sql和Access数据库文件 documentation下为官方的相关文档 DllCode下为控件的源码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值