TreeView详解

转载 2007年09月19日 11:29:00
ASP.NET TreeView 控件是一个用于呈现 TreeView UI 的功能强大的服务器控件,如下图中所示。该控件支持各种编程模型,从静态定义的树、到动态构造的树以及数据绑定的树几乎无所不包。TreeView 的呈现是可以完全自定义的,从而允许该控件具有多种外观。TreeView 支持回发样式的事件以及简单的超链接导航,还支持唯一的事件处理模型,该模型允许从客户端直接检索数据,而无需服务器回发。该控件还支持在各种浏览器上呈现,并可利用一些高级功能,例如在桌面浏览器的更高版本中使用客户端脚本。



静态定义的树是 TreeView 的最简单形式,如下所示。注意,该 TreeView 的持久性格式直观上类似于最终呈现的树的分层结构。
  <asp:TreeView ExpandDepth="1" runat="server">    <Nodes>      <asp:TreeNode Text="Employees">        <asp:TreeNode Text="Bradley" Value="ID-1234" />        <asp:TreeNode Text="Whitney" Value="ID-5678" />        <asp:TreeNode Text="Barbara" Value="ID-9101" />      </asp:TreeNode>    </Nodes>  </asp:TreeView>
该树中的每个节点由一个名称/值对(无需唯一)表示,该名称/值对分别由 TreeNodeTextValue 属性定义。将呈现节点的文本,而不呈现节点的值,该值通常用作处理回发事件的附加数据。此示例还使用了 TreeView 的 ExpandDepth 属性,以在第一次呈现该控件时,自动展开树的第 1 级。

除了文本/值对以外,TreeNode 公开 NavigateUrlTarget 属性,以分别定义用于导航的超链接和窗口/框架目标。TreeView 自身还公开一个 Target 属性,用于所有 TreeNode 具有相同值的常见情况。当单击节点文本时,超链接将相应变化,如下例中所示。

  <asp:TreeView runat="server">    <Nodes>      <asp:TreeNode Text="My Computer">        <asp:TreeNode Text="Favorites">          <asp:TreeNode Text="News">              <asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/>            <asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/>          </asp:TreeNode>        </asp:TreeNode>      </asp:TreeNode>    </Nodes>  </asp:TreeView>
以下示例演示一个静态定义的简单 TreeView,该 TreeView 使用 NavigateUrl 进行导航。

C# TreeView
Run Sample View Source

通过灵活自定义图像和样式,及通过使用可指定自定义用户界面选项的控件属性,ASP.NET TreeView 能够实现多种不同的外观。TreeView 的可视元素如下表所示。



TreeView 包括三种基本的节点类型:根节点、父节点和叶节点。根节点是 TreeView 的 Nodes 集合中带有子节点且 Parent 属性值为空的节点;根节点为树中顶级的父节点。父节点是 TreeView 的 Nodes 集合中的特定节点,在该层次结构中,这类节点带有子节点。叶节点是 TreeView 的 Nodes 集合中没有子节点的节点;叶节点既不是根节点,也不是父节点。

TreeView 为每种节点类型(RootNodeStyleParentNodeStyleLeafNodeStyle)公开 TreeNodeStyle 的自定义属性,每种类型具有一个用于为节点类型定义图标的 ImageUrl 属性。这些图像呈现在节点文本的左边,如上图所示。通过使用 TreeNode 对象的 ImageUrl 属性,每个 TreeNode 可以选择重写其节点类型的默认图像。

TreeView 还公开 CollapseImageUrlExpandImageUrl 属性,用于 TreeView 展开和折叠的指示符,这些指示符通常表示为加号和减号图标。类似地,NoExpandImageUrl 属性用于在没有子节点的节点旁呈现。如果没有指定,这些属性默认为 TreeView 提供的内置资源图像。可以使用 TreeView 的 ShowExpandCollapse 布尔型属性禁用这些默认图像。

C# TreeView Images
Run Sample View Source

每种节点类型(RootNodeStyle、ParentNodeStyle 和 LeafNodeStyle)的 TreeNodeStyle 属性还可用于自定义节点的字体、颜色以及其他样式信息。RootNodeStyle、ParentNodeStyle 和 LeafNodeStyle 样式属性重写 NodeStyle 属性的任何设置,NodeStyle 属性设置应用于所有节点类型。选择一个节点时(如设置 TreeNode.Selected = true),该节点还可以应用不同的样式。选择一个节点时,SelectedNodeStyle 重写该节点相应的未选择时的任何样式属性。节点选择将在以下稍后的主题中进行讨论。最后,HoverNodeStyle 定义当客户端鼠标光标悬停在树节点上时应用的属性(仅适用于具有脚本功能的客户端)。样式属性按照以下的优先级顺序进行合并:
  1. NodeStyle
  2. RootNodeStyle、ParentNodeStyle 或 LeafNodeStyle
  3. SelectedNodeStyle
  4. HoverNodeStyle
因为每个树节点最终将呈现在表中,TreeNodeStyle 继承自 Style 基类,并另外定义了三个新的属性:

属性 说明
NodeSpacing 定义在呈现输出中节点与其上下节点之间的间距(以像素为单位)。
VerticalPadding 定义节点文本的顶部及底部与文本边框之间的间距(以像素为单位)。
HorizontalPadding 定义节点文本的左侧和右侧与文本边框之间的间距(以像素为单位)。
ChildNodesPadding 定义一个展开的父节点的最后一个子节点与紧随该父节点的同级节点之间的间距(以像素为单位)。

TreeView 的 NodeIndent 属性还可定义每个节点的左边缘与其父节点的左边缘之间的右缩进量。这些样式属性在节点上的呈现效果如下图所示。



下面的示例演示如何使用 TreeView 的几个样式属性。注意,RootNodeStyle 与 NodeStyle 设置进行合并,HoverNodeStyle 与 RootNodeStyle 和 NodeStyle 进行合并。

C# TreeView Styles
Run Sample View Source


TreeView 线条。TreeView 能够使用一系列预呈现的图像呈现连接树节点的线条。这些线条图像由设计时程序(如 Microsoft Visual Studio)生成,这些程序在呈现 TreeView 线条的实时预览时采用下面的参数作为输入:
  • 线条样式(虚线、点线或实线)
  • 线条宽度(以像素为单位)
  • 线条颜色
  • 线条图像宽度
  • 线条图像高度
  • CollapseImageUrl
  • ExpandImageUrl
线条设计器生成一些图像,可以平铺这些图像以连接树节点。这些图像保存在一个可从 Web 访问的位置(如 ~/MyApp/Images/TreeViewLines),并将该位置作为相对 URL 分配给 TreeView 的 LineImagesFolderUrl 属性。注意,向树线条设计器提供的展开和折叠图像呈现在线条图像中,并位于带有子节点的父节点及根节点的旁边。

C# TreeView Lines
Run Sample View Source
样式和图像的巧妙组合能够在 TreeView 的不同呈现中带来各式各样的变化。由于许多开发人员可能不太关心艺术问题,ASP.NET 允许将应用至页的主题中的外观应用于 TreeView 控件。若要设置 TreeView 的外观,只需将 SkinID 属性设置为主题中所需外观的名称。下面的示例演示应用于 TreeView 控件的各种外观:
  • Help
  • BulletedList
  • Arrows
  • Contacts
  • FAQ
  • MSDN
  • Inbox
  • Events
  • TOC
注意,还可以为 TreeView 和其他控件创建您自己的自定义主题。有关更多信息,请参见此教程中的“应用样式、主题和外观”一节。

C# TreeView Themes
Run Sample View Source

TreeView 还公开一个 LevelStyles 集合属性,该属性包含对应于树中的每一级深度的 TreeNodeStyle 对象。例如,集合中的第一个样式对应于深度为 0 的 TreeNode,第二个样式对应于深度为 1 的节点,以此类推。通过使用此集合,可以定义一些唯一的样式来区分树中的级别。

C# TreeView Level Styles
Run Sample View Source

TreeView 的另一个自定义呈现功能是能够在每个节点内(节点文本和节点图像之间)呈现复选框,如下图所示。



TreeView 的 ShowCheckBoxes 属性能够为不同类型的树节点(根节点、父节点或叶节点)启用复选框,或对所有节点启用或不启用复选框。通过使用 TreeNode 自身的 ShowCheckBox 布尔型属性,单个 TreeNode 可以重写此默认设置。TreeNode 的 Checked 属性用于以声明方式或通过代码选中或取消选中节点的复选框。TreeView 的 CheckedNodes 集合可用于枚举 TreeView 中所有选中的节点,如下例所示。还可以处理 TreeView 的 CheckedChanged 事件,每当 TreeNode 的复选框的选中状态发生更改时,将激发该事件(在事件的 EventArgs 参数中传递该树节点)。

C# TreeView CheckBoxes
Run Sample View Source

除使用 NavigateUrl 进行导航外,当 TreeNode 对象设置了 Value 属性时,TreeView 支持回发样式选择。TreeView 的 SelectedValue 属性公开当前选择的 TreeNode 的值。SelectedNode.ValuePath 属性公开引导至所选择节点的所有 TreeNode 的值,这些值之间以 PathSeparator 字符分隔。下面的示例演示这些属性。

C# TreeView Selection
Run Sample View Source

TreeView 公开多种事件,可以使用这些事件在用户与树交互时,执行自定义代码。例如,当 TreeNode 展开或折叠时,会引发 TreeNodeExpandedTreeNodeCollapsed 事件。当在客户端以交互方式选择 TreeNode 时,会引发 SelectedNodeChanged 事件。

C# TreeView Events
Run Sample View Source

当在客户端展开节点时,TreeView 支持对节点进行按需填充。这允许您仅向客户端发送全部节点的子集,当用户与 TreeView 交互时,再为展开的节点继续检索其他数据,这可提高页的总体性能。若要按需填充节点,请为不带子节点的节点设置 TreeNode PopulateOnDemand 属性,当该节点展开时应进行填充。然后处理 TreeNodePopulate 事件,以编写填充节点的逻辑。此事件在事件参数中传递对展开节点的引用。然后,可以以编程方式填充此节点的子节点,并将这些子节点返回至客户端进行呈现。

TreeView 支持两种模式的按需填充,这两种模式由 PopulateNodesFromClient 属性进行配置。当该属性设置为 true(默认值)时,TreeView 执行客户端回调,以从服务器事件中检索节点,而不回发整个页。只有在支持客户端回调(由浏览器的功能指示)的浏览器上,才支持此模式。当 PopulateNodesFromClient 设置为 false 时,TreeView 提交常规的回发,引发服务器事件,以填充节点。

下面的示例演示一个按需填充的 TreeView,以显示包含此示例的应用程序的文件系统。每个 TreeNode 的值包含每个文件或目录的虚拟路径,而不是向客户端浏览器呈现完全限定的路径(安全风险)。 TreeNodePopulate 事件对虚拟路径执行 HttpRequest.MapPath,以获取服务器上的完全路径。该事件还会验证,所请求的路径是否对应于当前应用程序根目录下的某个文件或目录,以防止客户端的路径欺骗。非常需要注意的是,回调参数可能在客户端上被篡改,因此在 TreeNodePopulate 事件处理程序中需要合适的逻辑,以验证参数是否包含所需的值。

C# Populating TreeView On Demand
Run Sample View Source

下一示例演示如何使用 TreeView 的 PopulateOnDemand 功能,以编程方式从关系数据库中创建 TreeNode。注意,事件处理程序必须检查展开的父节点的深度,以确定要执行检索节点的数据库查询。

C# Populating TreeView from a Database
Run Sample View Source

虽然可以以声明方式或编程方式在代码中填充节点,但也可以通过设置 DataSourceID 属性,将 TreeView 控件数据绑定到分层数据源控件。绑定到数据源时,TreeView 使用数据源中的节点自动填充 TreeNode。ASP.NET 自带两种分层数据源控件: XmlDataSource 控件和 SiteMapDataSource 控件。当绑定到分层数据源时,TreeView 必须将数据节点的属性映射到 TreeNode 对象的属性。如果这样的映射不存在,则 TreeView 只将每个数据节点的名称呈现为节点文本。对 XmlDataSource,这会导致 TreeView 呈现基础 XML 数据的结构以及其中的元素名称,如下例中所示。

C# Binding TreeView to an XML File
Run Sample View Source

为了向 TreeView 提供更有意义的呈现,可以为树中的节点指定各自的数据绑定。可以将 TreeNodeBinding 对象添加到 TreeView 的 Databindings 集合,以便对分层数据项的字段映射到 TreeNode 属性的方式进行定义。 TreeNodeBinding 有两个重要属性可确定绑定所应用到的分层数据项集。DataMember 属性指定数据项的类型,如果是 XML 数据,则该属性指定应用绑定的元素名。Depth 属性指定层次结构中应用数据绑定的深度。可以设置 DataMember 或 Depth,也可以同时设置这两个属性。例如,若要为给定 XML 文件中的所有 Book 元素定义数据绑定,请将 DataMember 设置为“Book”。若要为深度为 1 的所有节点定义绑定,请将 Depth 属性设置为 1。若要为深度为 1 的所有 Book 节点定义绑定,请将 TreeNodeBinding 对象的 DataMember 设置为“Book”,并将 Depth 设置为 1。

一旦将 DataMember 或 Depth 设置为与给定的节点集匹配,就可以定义 TreeNodeDataBinding 的其他属性以定义数据项(如果是 XML 数据,则为 XML 节点属性 (Attribute))的属性 (Property) 如何映射到 TreeView 控件呈现的 TreeNode 的属性 (Property)。例如,TextField 属性定义要用于 TreeNode 的 Text 的属性的名称。同样,ValueField 属性定义要用于 TreeNode 的 Value 的数据项属性。NavigateUrlField 属性定义要用于 TreeNode 的 NavigateUrl 的字段/属性,等等。还可以针对给定的数据绑定为 TreeNode 属性指定静态值。例如,若要指定 Book 元素的 TreeNode 具有“Book.gif”图像,请对 DataMember 属性为“Book”的 TreeNodeBinding 的 ImageUrl 属性进行设置。

下面的示例演示绑定到与前一示例相同的 XML 数据的 TreeView,并针对 XML 层次结构中的特定元素定义了 DataBindings。

C# TreeView Data Bindings
Run Sample View Source

XmlDataSource 支持 XPath 属性,您可以使用该属性筛选由数据源公开的节点集。在下面的示例中, XPath 属性被设置为 Bookstore/genre[@name='Business']/book,用于筛选数据源的节点从而仅显示属于“Business”领域的 book 元素。注意要为 XPath 属性指定正确的语法;否则,数据源可能不公开任何节点(并且关联的数据绑定控件将不呈现)。

C# Binding TreeView to an XPath Result
Run Sample View Source

注意,TreeView 的层次结构与源 XML 的层次结构完全匹配。因此,为绑定到 TreeView 而专门构造 XML,或使用 XSL 转换将数据“重构”到一个适当的层次结构中都是常见的做法。

C# Binding TreeView to an XSLT Transformation
Run Sample View Source

诸如 XmlDataSource 这样的分层数据源控件将一个唯一的路径关联到其层次结构中的每个节点,以便从位于特定位置的节点的数据绑定控件为请求提供服务。这样可实现一些功能如 TreeView 的 PopulateOnDemand 功能,即展开每个节点时将数据源中的相关节点向下发送至客户端,而不是一次向下发送所有节点。它还允许在页代码中使用该路径配置数据源以显示特定位置的节点。路径语法特定于所表示的数据的类型,不能在代码中构造。但是,可以使用 TreeNode DataPath 属性访问绑定到 TreeView 的节点的数据路径。由于 XmlDataSource 的数据路径语法使用 XPath 表达式,可以将这些路径分配给 XmlDataSource 的 XPath 属性以筛选节点列表。下面的示例演示这种使用 XmlDataSource 实现主/详细信息方案的方法。有两个 XmlDataSource 控件,一个绑定到 TreeView(主控件),另一个绑定到 DataList(详细信息控件)。当 TreeView 节点被单击时,则检索 DataPath 属性并将其指定给绑定到 DataList 的 XmlDataSource 控件,以便显示被单击的特定节点的其他信息。

生成该主/详细信息方案需要几个步骤。首先,仅将 TreeView 控件绑定至公开 Events.xml 文件中的数据的 XmlDataSource。

C# XML-based Event Log using TreeView
Run Sample View Source

然后,将 Databindings 添加至 TreeView,将节点属性与 TreeNode 属性关联,并设置 SkinID,以自定义 TreeView 的样式和图像。

C# XML-based Event Log using TreeView (DataBindings)
Run Sample View Source

通过处理 TreeNodeDataBound 事件,可以自定义数据节点与 TreeNode 对象之间的映射。此事件提供对数据源中的 DataItem 的引用,可以将引用强制转换成适当的类型以检索属性。在本例中,DataItem 为 XmlNode 对象。

C# XML-based Event Log using TreeView (TreeNodeDataBound Event)
Run Sample View Source

最后,通过向页添加 DataList 显示当前所选 TreeNode 的详细信息,完成该主/详细信息方案。DataList 绑定至自己的 XmlDataSource。在 TreeNodeSelected 事件处理程序中,将获取选择的节点的 DataPath 属性,以便设置详细信息数据源的 XPath 属性。

C# XML-based Event Log using TreeView (Master-Details)
Run Sample View Source

站点导航数据是 ASP.NET 应用程序中分层数据的另一种形式,如“创建站点导航层次结构”一节所述。除了支持使用 ASP.NET 中的站点导航 API 对站点地图数据进行编程访问外,ASP.NET 2.0 还支持使用 SiteMapDataSource 控件进行声明性数据绑定。当将 TreeView 控件绑定至 SiteMapDataSource 时,站点地图的 Text 和 Url 属性可绑定到 TreeNode。虽然可以指定一个 DataBinding 集合建立这些绑定,但这不是严格必要的。TreeView 控件会自动将 TreeNode 的 Text 和 NavigateUrl 属性绑定到站点地图的相关属性(通过使用 SiteMapNodeINavigateUIData 接口完成)。当绑定到 SiteMapDataSource 时,TreeView 的另一个功能是自动将 SelectedNodeSelectedItem 属性设置为站点地图中的当前节点。

下面的示例演示绑定到 SiteMapDataSource 控件的 TreeView。此示例演示 Databindings 集合是出于演示目的,但如果仅绑定到节点的 Text 和 Url 属性,则不一定要这样。

C# Binding TreeView to SiteMap Data
Run Sample View Source 

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1440575

 

Bootstrap树形菜单插件TreeView.js使用方法详解

Bootstrap树形菜单插件TreeView.js使用方法详解
  • educast
  • educast
  • 2016年12月14日 14:48
  • 14139

TreeView连接数据库详解(ASP.NET)

数据库中建表(SQL Server) 表中填写数据 前台代码                     连接数据库         后台代码  public pa...

详解Silverlight Treeview的HierarchicalDataTemplate使用

详解Silverlight Treeview的HierarchicalDataTemplate使用 2009-12-15 05:16:58 标签:silverlighttreeview Hie...
  • wlanye
  • wlanye
  • 2012年01月04日 10:57
  • 1492

PB TreeView 属性,事件详解(转)

本文转自:http://chbin95233.blog.163.com/blog/static/32075111201010573448815/ ■TreeView控件可以以树型方式来组织项目,不仅...

bootstrap-treeview参数详解

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结...

TreeView详解

  • 2014年08月19日 00:26
  • 55KB
  • 下载

C#打开xml,并绑定TreeView

XML读取与写入  这个代码有个问题就是XML一个节点的属性 xNode.Attributes不能显示出来   //加载XML文件,并在TreeView上显示         publi...

jquery treeview(树状菜单) 插件参数说明

jquery treeview 树形插件 jquery treeview 插件参数说明 treeview开源地址:https://github.com/jzaeffer...

Asp.net TreeView异步加载数据,并结合checkbox实现多选删除

JS:         void PopulateNode(Object sender, TreeNodeEventArgs e)         {             Populat...

vb.net入门:TreeView控件的使用

一、TreeView 控件的一些常用属性: 1、CheckBoxes 属性:指示是否在树视图控件中的树节点旁显示复选框。 2、FullRowSelect 属性:当FullRowSelect 为 t...
  • w1p000
  • w1p000
  • 2012年05月13日 00:34
  • 1403
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TreeView详解
举报原因:
原因补充:

(最多只允许输入30个字)