ASP.NET - TreeView Web 服务器控件概述

TreeView Web 服务器控件用于以树形结构显示分层数据，如目录或文件目录。

一、TreeView 控件支持下面的功能：

·自动数据绑定，该功能允许将控件的节点绑定到分层数据（如 XML 文档）。

·通过与 SiteMapDataSource 控件集成提供对站点导航的支持。

·可以显示为可选择文本或超链接的节点文本。

·可通过主题、用户定义的图像和样式自定义外观。

·通过编程访问 TreeView 对象模型，使您可以动态地创建树，填充节点以及设置属性等。

·通过客户端到服务器的回调填充节点（在受支持的浏览器中）。

·能够在每个节点旁边显示复选框。

二、背景

TreeView 控件可以显示几种不同类型的数据：在控件中以声明方式指定的静态数据、绑定到控件的数据、或作为对用户操作的响应通过执行代码添加到 TreeView 控件中的数据。

2.1、显示静态数据

可以通过创建 TreeNode 元素集合，这些元素是 TreeView 控件的子级，在 TreeView 控件中显示静态数据。这些子元素也被称为子节点。

下面的示例演示用于 TreeView 控件的标记，该控件包含三个节点，其中两个节点具有子节点。

<asp:TreeView ID="MyTreeView" Runat="server">

<Nodes>

<asp:TreeNode Value="Child1" Expanded="True" Text="1">

<asp:TreeNode Value="Grandchild1" Text="A" />

<asp:TreeNode Value="Grandchild2" Text="B" />

</asp:TreeNode>

<asp:TreeNode Value="Child2" Text="2" />

<asp:TreeNode Value="Child3" Expanded="True" Text="3">

<asp:TreeNode Value="Grandchild1" Text="A" />

</asp:TreeNode>

</Nodes>

</asp:TreeView>

2.2、将数据绑定到 TreeView 控件

可以将 TreeView 控件绑定到支持 IHierarchicalDataSource 接口的数据源，例如 XmlDataSource 和 SiteMapDataSource 控件。此外，在绑定数据时，还可以完全控制要从数据源填充哪些字段。

2.3、使用 TreeNodeCollection 以编程方式显示数据

通过访问 Nodes 属性（该属性将返回 TreeNodeCollection 类），可以通过编程向 TreeView 控件填充数据。TreeNodeCollection 是 TreeNode 对象的强类型集合。TreeNode 对象含有一个名为 ChildNodes的属性。由于该属性可进一步包含 TreeNode 对象，所以 TreeNodeCollection 类是一个表示 TreeView 控件的所有节点的分层数据结构。

2.4、TreeView 节点类型

TreeView 控件由一个或多个节点构成。树中的每个项都被称为一个节点，由 TreeNode 对象表示。下表描述了三种不同的节点类型。

节点类型	说明
根节点	没有父节点、但具有一个或多个子节点的节点。
父节点	具有一个父节点，并且有一个或多个子节点的节点。
叶节点	没有子节点的节点。

尽管一个典型的树结构只有一个根节点，但 TreeView 控件允许您向树结构中添加多个根节点。当您要显示项目列表，但不显示单个主根节点时（例如在产品类别列表中），这一功能很有用。

每个节点都具有一个 Text 属性和一个 Value 属性。Text 属性的值显示在 TreeView 控件中，而 Value 属性则用于存储有关该节点的任何附加数据（例如传递给与节点相关联的回发事件的数据）。

单击 TreeView 控件的节点时，将引发选择事件（通过回发）或导航至其他页。未设置 NavigateUrl 属性时，单击节点将引发 SelectedNodeChanged 事件，您可以处理该事件，从而提供自定义的功能。每个节点还都具有 SelectAction 属性，该属性可用于确定单击节点时发生的特定操作，例如展开节点或折叠节点。若要在单击节点时不引发选择事件而导航至其他页，可将节点的 NavigateUrl 属性设置为除空字符串 ("") 之外的值。

2.5、即需填充 TreeNode 数据

静态定义数据结构有时是不可行的，或者数据可能会依赖运行时收集的信息。为了动态显示数据，TreeView 控件支持动态节点填充。将 TreeView 控件配置为即需填充时，该控件将在用户展开节点时引发事件。事件处理程序检索相应数据，然后填充到用户单击的节点。若要以数据即需填充 TreeNode 对象，请将节点的 PopulateOnDemand 属性设置为 true，并创建 TreeNodePopulate 事件处理程序以向 TreeNode 对象中填充数据。

2.6、客户端 TreeView 节点填充

任何在浏览器功能配置文件中将 SupportsCallback 属性设置为 true 的浏览器都支持客户端节点填充。

借助客户端节点填充，TreeView 控件可以通过从客户端脚本中调用服务器的 TreeNodePopulate 事件来填充节点，而无需完全回发至服务器。

2.7、启用客户端脚本

默认情况下，在高级 (Up-level) 浏览器中，TreeView 控件上的节点的展开 - 折叠功能是使用客户端脚本执行的。由于控件不需要回发至服务器来呈现新配置，所以使用客户端脚本可以提高呈现的效率。

说明： 如果浏览器中的客户端脚本被禁用或浏览器不支持客户端脚本，则 TreeView 控件将恢复到低级（Down-level）模式并在每次用户单击节点时回发到服务器。

2.8、TreeView 回发

默认情况下，除非浏览器不支持客户端脚本或者 EnableClientScript 属性被设置为 false，否则 TreeView 控件将在客户端处理展开 - 折叠功能。如果 PopulateNodesFromClient 属性被设置为 true 并且浏览器支持客户端脚本，那么 TreeView 控件将从服务器检索数据，而不回发整页。

当 TreeView 控件处于选择模式时，每次用户单击节点时都将回发到服务器并引发 SelectedNodeChanged 事件。

通常，您应该在 TreeView 控件处于选择模式或正在动态填充节点时处理回发事件。原因是 PopulateOnDemand 或 PopulateNodesFromClient 属性已设置为 true。

2.9、将 TreeView 控件与 UpdatePanel 控件一起使用

UpdatePanel 控件用于通过回发更新页面的选定区域，而不是更新整个页面。可在 UpdatePanel 控件内使用 TreeView 控件，但具有以下限制：

·TreeView 回调必须与异步回发关联，否则回调事件验证将会失败。在将 TreeNode 控件的 PopulateOnDemand 属性设置为 true 时，即启用了回调。可以使用以下方法之一来确保 TreeView 回调对 UpdatePanel 控件起作用：

·如果 TreeView 控件不在 UpdatePanel 控件内，则在不是异步回发的一部分的 TreeNode 控件上禁用回调。为此，需要将 PopulateOnDemand 属性设置为 false。

·以编程方式刷新在异步回发过程中注册回调的所有控件。例如，可以将 TreeView 控件放置在 UpdatePanel 控件内。TreeView 控件不必位于发起异步回发的 UpdatePanel 控件中，只要包含 TreeView 控件的 UpdatePanel 控件刷新即可。

·必须使用对级联样式表 (CSS) 类的引用来应用样式。例如，使用属性-CssClass（其中属性指 Property）属性 (Attribute) 来设置样式，而不是使用属性-子属性（其中属性指 Property）属性 (Attribute) 设置 NodeStyle 属性 (Property)。同样，在使用 NodeStyle 模板设置样式时，请使用模板的 CssClass 属性 (Attribute)。

·EnableClientScript 属性必须为 true（默认值）。此外，如果对 TreeView 控件启用了回调，则不能在异步回发之间更改 EnableClientScript 属性。

2.10、TreeNode 呈现

每个 TreeNode 对象包含四个 UI 元素，下面的图像中显示了这些元素，下面的表中还对其进行了描述。

2.11、TreeNode UI 元素

项	说明
“展开/折叠”图像	一个可选图像，指示是否可以展开节点以显示子节点。默认情况下，如果节点可以展开，此图像将为加号 [+]，如果此节点可以折叠，则图像为减号 [-]。
复选框	复选框是可选的，以允许用户选择特定节点。
“节点”图像	可以指定要显示在节点文本旁边的节点图像。
“节点”文本	节点文本是在 TreeNode 对象上显示的实际文本。节点文本的作用类似于导航模式中的超链接或选择模式中的按钮。

除了自身的属性外，TreeView 控件还支持每种节点类型的 TreeNodeStyle 控件的属性。这些样式属性将重写应用于所有节点类型的 NodeStyle 属性。

TreeView 还具有一个为所有节点指定缩进量级的 NodeIndent 属性。节点会从呈现 TreeView 控件的一侧缩进。对于从左向右呈现的区域设置而言，这是指左侧，而对于从右向左呈现的区域设置而言，这是指右侧。

当一个节点被选中或鼠标悬停于该节点上时，可对该节点应用不同的样式。当某个节点的 Selected 属性设置为 true 时，将应用 SelectedNodeStyle 属性，对于选中的节点，该属性将重写任何未选择的样式属性。当鼠标悬停于某个节点上时，将应用 HoverNodeStyle 属性。下面的图像和表描述了 TreeNodeStyle 属性。

2.12、TreeNodeStyle 属性

节点属性	说明
NodeSpacing	指定整个当前节点与上下相邻的节点之间的垂直间距。
VerticalPadding	指定在 TreeNode 文本顶部和底部呈现的间距。
HorizontalPadding	指定在 TreeNode 文本左侧和右侧呈现的间距。
ChildNodesPadding	指定 TreeNode 的子节点上方和下方的间距。
ImageUrl	指定在 TreeNode 旁显示的图像的路径。

2.13、在 TreeView 节点旁显示复选框

TreeView 控件的另一个自定义呈现功能是它可以通过使用 ShowCheckBoxes 属性在节点文本和图像之间显示复选框。显示复选框允许用户一次选择多个节点，这对于类似新闻组树结构的界面特别有用，这样用户可以一次选择并订阅多个新闻组。

2.14、使用 ExpandDepth 属性

默认情况下，TreeView 控件将显示被展开的树的所有节点。可以将 TreeView 控件配置为最初显示到任何深度。要执行此操作，可以将 ExpandDepth 属性设置为要显示的节点级别所对应的数字。例如，如果将 ExpandDepth 属性设置为 2，那么当站点最初呈现在客户端时，将显示节点的两个级别或两个子节点。