关于 TreeView WebControl

关于 TreeView WebControl 目前尚不支持 Microsoft® Internet Explorer WebControl。（本文包含一些指向英文站点的链接。） 本文介绍了 TreeView 控件的使用，此控件可用于帮助生成用户界面，以显示分层的数据集、文件夹视图以及其他类似的数据结构。此控件具有多种强大功能，包括支持数据绑定和高级浏览器中丰富的动态 HTML (DHTML) 行为。多数情况下，可以通过声明的方式创建 TreeView；但也可以在客户端或服务器上通过编程以多种方式来实现此控件。 本文包括以下内容： 简介 前提条件 术语 TreeView 对象 TreeView 元素 编写简单的 TreeView 格式设置 数据绑定 编程 性能提示 相关主题 简介 TreeView 是一个 ASP.NET 服务器控件，可以生成用于显示分层数据的用户界面。与其他 Microsoft® Internet Explorer WebControl 一样，TreeView 控件也会根据浏览器的类型来发送 HTML。在低级浏览器中，TreeView ASP.NET 服务器控件发送的页面内容是 HTML 3.2 格式的，而在高级浏览器中，HTML 页面还使用了 DHTML 行为，DHTML 行为是定义了自定义元素的客户端组件。对于 WebControl，高级浏览器指 Internet Explorer 5.5 或更高版本，低级浏览器指 Internet Explorer 5.01 或更低版本，或者是 Internet Explorer 以外的其他浏览器。 本文通过实际的示例说明了如何创建和使用 TreeView 控件。TreeView 是四个 WebControl 之一；因此，要创建包含这些控件的 Web 页面，它们所要求的前提条件都彼此类似。有关 WebControl 的一般信息（包括下载和安装），请参阅 Internet Explorer WebControls 和 Authoring Web Forms with the WebControls。 WebControl 是包含一组 DHTML 行为的 ASP.NET 服务器控件，这些行为在高级浏览器中提供了丰富的用户体验。对于每个 WebControl，一个 DHTML 行为对应一个客户端对象模型，该模型与 ASP.NET 服务器控件实现的服务器端对象模型密切对应。Internet Explorer 5.5 与 ASP.NET 中的组件体系结构有着明显差别，因此客户端对象和服务器端对象所对应的对象模型也略有差别。 同时使用客户端组件和服务器端组件意味着可以使用 TreeView 以两种模式来创建 Web 页面。在 ASP.NET 中，可以使用高级浏览器中的行为编写 Web 窗体，以便基于浏览器的性能来发送内容。这些页面可以利用以某种公共语言运行库语言编写的服务器端脚本。对于 Internet Explorer 5.5 或更高版本，可以使用客户端脚本编写包含 DHTML 行为的 Web 页面。 前提条件 要深入理解本文，您需要熟悉 ASP.NET 控件的基本类型，并了解如何使用它们创建简单的 Web 窗体页面。此外，还要具备一些有关浏览器脚本的编写以及 DHTML 行为的知识，因为 WebControl 在高级浏览器中要使用这些行为。 本文中的代码示例是用 Microsoft C# 和 Microsoft Visual Basic® .NET 编写的。即使 Web 开发人员对 ASP.NET 和公共语言运行库了解不多，也很容易理解这些示例。 有关用 ASP.NET 和 WebControl 创建 Web 页面的详细设置要求信息，请参阅 Internet Explorer WebControl。 术语 术语 说明 Web 窗体 ASP.NET Web 窗体页面框架是一种可扩展的公共语言运行库编程模型，可用于动态生成 Web 页面。Web 窗体是 .aspx 文件，由 ASP.NET 分析和处理。WebControl 是自定义的 ASP.NET 控件，用于在 Web 窗体环境中创建页面。 TreeView 对象 本节概要介绍了客户端和服务器端 TreeView 实现的基本异同点。您可以通过 TreeView Reference 页面提供的链接访问 TreeView 组件涉及的客户端和服务器端对象的参考文档。 也可以使用 Visual Studio .NET 中的 TreeView Editor（TreeView 编辑器）直观地创建 TreeView 控件。本文主要介绍使用 TreeView 手动创建内容的方法。有关直观编辑 TreeView 的详细信息，请参阅 Using the TreeView Designer in Visual Studio .NET。 您可以通过声明的方式创建 TreeView，也可以在客户端或服务器上编写脚本来创建此控件。本文中的示例采用了声明方式，并在 Web 窗体页面中使用了 ASP.NET TreeView 服务器控件，在 HTML 页面中使用了 TreeView 行为。 由于 ASP.NET 和 Internet Explorer 支持的编程语言不同，因而这里分别提供了客户端组件和服务器端组件的参考文档。 ASP .NET 服务器控件 ASP.NET 服务器控件提供了最完备的 TreeView 编程模型。如果 Web 页面需要在各种不同的浏览器中运行，则建议使用 ASP.NET 服务器控件。因为 WebControl 会检测浏览器的类型并向低级浏览器发送 HTML 3.2 内容。 有关详细信息，请参阅 ASP .NET Server Controls Reference。 客户端行为 如果希望优化 Internet Explorer 5.5 或更高版本中的客户端性能，也有一个 TreeView behavior 可供使用。使用 WebControl 的 ASP.NET Web 窗体会自动将该 TreeView behavior 下载到高级浏览器中。这样，在编写仅用于客户端的 HTML 页面时，可以独立于 ASP.NET 来使用 TreeView 行为。 许多 Microsoft Windows® 应用程序中的 TreeView 通常具有丰富的特性，例如，可以使用鼠标或键盘输入来展开或折叠 TreeView 中的节点。TreeView 行为支持所有这些特性，并且可以在基于客户端或服务器的 Web 页面中实现数据绑定。 TreeView 元素 您可以结合使用一个或多个由客户端和服务器端的 TreeView 组件支持的以下元素来创建 TreeView。 元素名称 说明 TreeView 定义一个 TreeView。 TreeNodeType 定义一个节点类型，适用于 TreeView 中的一个或一组节点。 TreeNode 在 TreeView 中创建一个节点。 我们提供了有关使用 TreeView ASP.NET 服务器控件和 TreeView 行为来创建 TreeView 的参考文档。有关详细信息，请参阅 TreeView Reference 页面。 TreeView 元素是 TreeNode 和 TreeNodeType 元素的容器。这些元素共同定义了树视图的结构、布局和外观。TreeView 不能包含这三个元素以外的任何其他 HTML 内容。 TreeView 元素可以包含任意数量的 TreeNodeType 元素，只要客户端和主机上有足够的资源。TreeNodeType 元素用于定义 TreeNode 元素的样式、图像和其他行为。可以通过元素的 Type 来分组 TreeNode 元素，以便使用 TreeNodeType 元素设置和修改它们的格式。TreeNodeType 元素必须是 TreeView 元素的子元素，并且必须出现在第一个 TreeNode 元素之前。 TreeNode 元素只能包含其他 TreeNode 元素。但是，通过将 HTML 内容指定给 TreeNode 元素的 Text 属性，可以将内容嵌入到 TreeView 中。TreeNode 元素的 Text 内容将显示为 HTML 而不是纯文本。 编写简单的 TreeView 本节介绍创建一个简单 TreeView 的步骤。您可以使用任何文本编辑器来执行所有步骤。 要完成以下过程，需要安装 WebControl。有关详细信息，请参阅 Internet Explorer WebControls 概述。 创建一个 Web 应用程序。 该 Web 应当命名为 webcontrols，因为本文中的所有示例都要使用它。要使 WebControl 正常运行，必须将新的 Web 配置为一个 Web 应用程序。 创建一个空白 Web 窗体页面。 向 Web 中添加一个新文件并将其保存为 tree1.aspx。 添加导入指令。 在 Web 窗体的第一行编写 WebControl 的导入指令代码，如下所示： <%@ import namespace="Microsoft.Web.UI.WebControls" %> 添加 @ Register 指令。 在 Web 窗体的第二行编写 WebControl 的 @ Register 指令代码。 <%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 添加文档结构。 在 @ Register 指令下方添加以下内容，用于提供基本的文档结构。 添加一个 Form 元素。 所有 WebControl 元素必须在一个 FORM 元素中建立；因此，在文档 BODY 中添加以下标记。 请注意，为 FORM 指定了 runat 属性，表明 ASP.NET 将处理任何用户输入的结果。 现在，该 Web 窗体已包含使用 WebControl 元素进行创作所需的所有处理指令、元素和内容。tree1.aspx 文件的内容现在应类似如下： <%@ import namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 保存页面并在浏览器中查看它。如果一切正常，应该仅显示一个空白页面。该页面在查看之前已经被编译，并且会报告任何语法错误。如果有错误出现，请更正报告的错误。如果上面给出的示例代码无法运行，可能是由于未正确安装 WebControl。 提示：喜欢探索的读者可以尝试在声明中给出错误的命名空间或程序集属性的值，然后保存并再次查看该页面。这是一种有益的尝试，因为您可以看到公共语言运行库如何报告 Web 窗体错误。 添加一个 TreeView 元素。 添加一个 TreeView 元素作为 FORM 的子元素，并将其 runat 属性也设置为 server。 现在，该 TreeView 元素不包含任何节点，因此 Web 页面中没有显示任何内容。 注意：请留心 TreeView 元素的标记前缀，页面中的所有 WebControl 元素都使用了值 mytree，因为该值已在 @ Register 指令中预定义。 向 TreeView 添加一个 TreeNode。 接下来，添加一个 TreeNode 作为 TreeView 元素的子元素。 下图显示了 TreeView 的最初外观。 因为只有一个节点，所以它就是根节点并拥有焦点。背景色采用了默认样式，可以通过设置相应属性来改变它。单击节点可以选中该节点。 添加第二个 TreeNode。 添加另一个 TreeNode 作为第一个 TreeNode 元素的子元素。 保存并显示页面。 下图显示了 TreeView 的最初状态。 现在，TreeView 显示了根节点。根节点带有一个图形，表明可以将它展开。单击该节点可以将它展开或折叠。 注意：这个示例显示了 TreeView 中节点的默认状态是折叠的。您可以通过设置它的 Expanded 属性来控制节点的最初状态。 至此，基本 TreeView 示例已创建完毕。下面的示例将进一步揭示 TreeView 的其他属性和功能。 格式设置 本节讨论用于自定义 TreeView 用户界面 (UI) 的一些有用技术。您可以逐个设置 TreeNode 元素的格式，也可以按组修改具有相同 Type 的节点。 通常，我们希望 TreeView 的每一层都显示一个独特的图形。有时又需要自定义单个节点的外观，而不考虑它们在树中所处的深度及其父元素的样式。TreeView 提供的属性满足了所有这些可能的要求。 定义 TreeNodeType 下面的示例显示了 TreeView，其中包含一个小型的城市和州的集合。要自定义节点的外观，首先使用 TreeNodeType 元素定义一个 Folder 节点 Type。 <%@ import namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 此功能要求安装 Microsoft® Internet Explorer 3.0 或更高版本。请单击下面的图标以安装最新版本。然后重新加载本页面并查看示例。 此示例显示了 TreeNodeType 元素的使用，该元素可用于设置 TreeView 的布局和外观的格式和结构。TreeView 元素的 ChildType 属性被指定为 Folder。由于 ChildType 是在 TreeView 上指定的，而 TreeView 是整个树的容器元素，因此所有 TreeNode 元素的 Type 属性都将成为 Folder。显然，这种方法要比为每个节点添加 Type 属性效率更高。 在 TreeView 上将 ChildType 声明为 Folder 后，需要使用 TreeNodeType 元素定义此类型。因此，示例中 TreeNodeType 元素的 Type 属性也将具有相同的值 Folder。 ExpandedImageUrl 和 ImageUrl 属性可以分别替代用于显示展开节点和正常节点的默认 TreeView 图像。 根据深度自定义树节点 下面的示例将在以前的代码中添加少量内容，为 TreeView 的每一层生成自定义的文件夹图标。以下示例使用了两层 TreeNode 元素。其中，代表城市的节点嵌套在代表州的节点中。 此功能要求安装 Microsoft® Internet Explorer 3.0 或更高版本。请单击下面的图标以安装最新版本。然后重新加载本页面并查看示例。 注意，这里在 TreeView 和第一个 TreeNodeType 元素上使用了 ChildType 属性。TreeView 定义了其子项具有 Folder 类型，第一个 TreeNodeType 元素定义了其子项具有 City 类型。在此代码中，第二个 TreeNodeType 元素不具有 ChildType，因为该元素定义的是 TreeView 中最深的 TreeNodeType。 应用样式 WebControl 控件具有丰富的功能，在高级浏览器中它们可以支持鼠标和键盘操作。这意味着，根据用户的交互方式，TreeView UI 的元素可以具有不同状态。WebControl 提供了以下特殊属性，以简化基于元素的当前状态来自定义元素外观的过程。 DefaultStyle HoverStyle SelectedStyle 使用上述每个属性都可以定义一个或多个级联样式表 (CSS) 属性/值对。使用的格式与标准 CSS style 属性的用法相同。WebControl 支持字体、颜色和尺寸的最常用样式，但并不支持所有的 CSS 样式。 另一种可用于设置文本格式的方法是直接将 HTML 应用到 Text 属性。 数据绑定 TreeView 也支持 数据绑定，因此可以生成动态的内容。下面的示例显示的 TreeView 与前一个示例类似，但没有使用静态内容，而是使用了可扩展标记语言 (XML) 文件来提供 UI 的数据源。 该示例使用 TreeNodeSrc 属性绑定到 state_city.xml 文件，并由该文件填充 TreeView。 通过此代码段可以看出，.aspx 文件中的标记非常简洁。 state_city.xml 文件包含以下内容： 此功能要求安装 Microsoft® Internet Explorer 3.0 或更高版本。请单击下面的图标以安装最新版本。然后重新加载本页面并查看示例。 下面的示例显示了如何配合使用 TreeNodeTypeSrc 属性和 XML。该示例使用了两个 XML 文件，一个对应树节点，一个对应节点类型。通过向 UI 添加额外的自定义内容，我们建立了第一个数据绑定示例。 Web 页面的标记中仅使用了一个 TreeView 元素，如下所示： TreeNodeTypes.xml 文件的内容如下所示。 此功能要求安装 Microsoft® Internet Explorer 3.0 或更高版本。请单击下面的图标以安装最新版本。然后重新加载本页面并查看示例。 用 XML 和 XSL 模板进行数据绑定 在某些情况下，可能需要使用只读的 XML 数据，也可能无法将 XML 数据直接绑定到 TreeView。TreeView 也支持可扩展样式表语言 (XSL) 模板，后者可以将 XML 文件转换为正确的格式和结构。XSL 可用于将 XML 文件转换为包含 TreeNode 和 TreeNodeType 元素的数据绑定。 下面的示例显示了如何使用 XML 和 XSL 来填充一个 TreeView。 下面是 TreeView 元素的标记，该元素绑定到一个 XML 文件 nodes.xml 和一个 XSL 文件 template.xsl。 nodes.xml 文件包含以下内容： template.xsl 文件包含以下内容： main main XSL 将源文件 XML 转换为正确格式的 TreeView。 警告：要使 TreeView 数据绑定能够正常运行，数据绑定源文档中的 TREENODES 和 TREENODETYPES 元素必须大写。 对多个 XML 文件的数据绑定 如果 TreeView 的 XML 数据来自多个文件，也可以实现对多个源文件的数据绑定。例如，可以将 TreeNode 元素绑定到各个 XML 和 XSL 文件。 还可以在某个数据绑定 XML 文件中指定 TreeNodeTypeSrc、TreeNodeSrc 和 TreeNodeXsltSrc 属性。如果 XML 数据包含指向其他 XML 文件的属性，可以用 XSL 将其转换为相应的 TreeView 标记。 用多个 XML 文件创建 TreeView 时，并不会一次加载该树的所有数据绑定节点。如果为某个 TreeNode 元素设置了 TreeNodeSrc 属性，则只有该节点展开后其内容才会真正绑定到 XML 源文件。 将 TreeView 元素绑定到某个数据源时，它会为自己的所有根节点提取 XML 源数据。如果这些根节点也具有 TreeNodeSrc 属性，这些属性将被忽略，直到用户展开某个根节点。展开的根节点将绑定到其数据源，同时下载并显示其子节点。因此，如果由父节点为其子元素生成 XML，并且该 XML 包含子元素用来进行数据绑定的 TreeNodeSrc，则可以将一个节点的子元素动态绑定到某个 XML 源文件。 节点的 TreeNodeSrc 属性被忽略，直到第一次展开该节点。在展开节点之前，可以动态修改 TreeNodeSrc 属性。第一次展开节点时，该节点将绑定到当前 TreeNodeSrc 指向的 XML 数据。 用 XML 和 SQL Server 进行数据绑定 WebControls 元素也可以使用其他 XML 数据提供程序，如下所示： 该示例使用了一种更高级的技术。TreeNodeSrc 属性被设置为一个 URL，后者执行 Microsoft SQL Server(tm) 数据库上的一个存储过程来动态生成 XML 数据岛。 通过这些示例可以看出，对 TreeView 进行数据绑定 是非常简单的。 数据绑定中的命名空间继承 将 WebControls 元素数据绑定到 XML 数据岛时，用于填充控件的 XML 内容不能使用命名空间前缀。因为命名空间是由作为数据使用者的元素指示的。有关详细说明，请参阅 TreeNodeTypeSrc 和 TreeNodeSrc。 编程 前面给出的示例表明，多数情况下编写一个功能完备的 UI 元素不需要任何编程工作。本节简要介绍一些可用于 TreeView 的简单的脚本编写技术。 TreeView 事件 通过将 AutoPostBack 属性设置为 true 可以将用户交互产生的事件导向服务器。同时处理高级浏览器和低级浏览器事件时应该使用服务器端脚本，因为低级页面内容中没有使用 Internet Explorer 5.5 或更高版本中所使用的丰富的 DHTML 行为。 对于包含 TreeView 的 Web 页面，用户的主要交互是展开和折叠树中的节点来浏览内容。下面的示例代码显示了如何使用 C# 在 Web 窗体中处理 onexpand、oncollapse 和 onselectedindexchange 事件。 在此脚本中，需要具有一个 id 为 mylabel 的元素。 Event Log: 注意：此标记必须放在 TreeView 使用的 FORM 元素内。 可以通过编程或使用 TreeView 的属性将 C# 脚本中的函数加入到事件中，如下所示： 进行 TreeView 编程时经常要使用 onexpand 和 oncollapse 事件。在本示例中，每次节点展开或折叠时，脚本都将添加到 div 元素的 innerText 中。 服务器端包含 由于 WebControls 是用 ASP.NET 建立的，所以也支持服务器端“包含”。下面的示例显示了其实现方法。 前面的示例使用了 nodes.txt 文件来填充一个 TreeView，下面我们使用包含文件来填充 TreeView 的两个单独的 TreeNode 分支。 与 XML 数据绑定的命名空间前缀规则不同，包含文件的内容中的元素必须使用与其父元素相同的标记前缀。因此，books.txt 和 magazines.txt 文件的内容应使用 mytree 标记前缀。 性能提示 本节提供了一些 TreeView 应用建议。 树的大小 建议不要在单个 TreeView 数据岛中显示大型分层数据集。作为一般规则，应尽量将一棵树中的节点数控制在 1000 以下。 每次更新一个 TreeView 控件的 UI（例如展开或折叠节点）时，都会向视图状态中追加数据，从而使数据状态保存了 Web 页面的状态变化历史记录。这意味着每次进行包含大量数据的视图更新时，追加到视图状态历史记录中的数据量也会增加。在 ASP.NET 中，视图状态的大小是有限制的，因此多次更新大型树层次结构可能导致性能问题，并且可能丢失部分历史记录。 相关主题 Internet Explorer WebControls Internet Explorer WebControls Download About the MultiPage WebControl About the TabStrip WebControl About the Toolbar WebControl WebService Behavior WebService Reference