关于 TreeView WebControl （二）-控件新闻-慧都网

关于 TreeView WebControl （二）

翻译|其它|编辑：郝浩|2005-03-17 12:28:00.000|阅读 2357 次

概述：

编写简单的 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 指令下方添加以下内容，用于提供基本的文档结构。
　

<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>

添加一个 Form 元素。
所有 WebControl 元素必须在一个 FORM 元素中建立；因此，在文档 FORM 元素中建立；因此，在文档 BODY 中添加以下标记。
　

请注意，为 FORM 指定了 runat 属性，表明 ASP.NET 将处理任何用户输入的结果。

现在，该 Web 窗体已包含使用 WebControl 元素进行创作所需的所有处理指令、元素和内容。tree1.aspx 文件的内容现在应类似如下：

保存页面并在浏览器中查看它。如果一切正常，应该仅显示一个空白页面。该页面在查看之前已经被编译，并且会报告任何语法错误。如果有错误出现，请更正报告的错误。如果上面给出的示例代码无法运行，可能是由于未正确安装 WebControl。

提示：喜欢探索的读者可以尝试在声明中给出错误的命名空间或程序集属性的值，然后保存并再次查看该页面。这是一种有益的尝试，因为您可以看到公共语言运行库如何报告 Web 窗体错误。
　

添加一个 TreeView 元素。
添加一个 TreeView 元素作为 FORM 的子元素，并将其 runat 属性也设置为 server。
　

<BODY>
<FORM runat="server">
<mytree:treeview runat="server"></mytree:treeview>
</FORM>
</BODY>

现在，该 TreeView 元素不包含任何节点，因此 Web 页面中没有显示任何内容。

注意：请留心 TreeView 元素的标记前缀，页面中的所有 WebControl 元素都使用了值 mytree，因为该值已在 @ Register 指令中预定义。
向 TreeView 添加一个 TreeNode。
接下来，添加一个 TreeNode 作为 TreeView 元素的子元素。

<mytree:treeview runat="server">
<mytree:treenode text="我的第一个树节点">
</mytree:treenode>
</mytree:treeview>

下图显示了 TreeView 的最初外观。

因为只有一个节点，所以它就是根节点并拥有焦点。背景色采用了默认样式，可以通过设置相应属性来改变它。单击节点可以选中该节点。

添加第二个 TreeNode。
添加另一个 TreeNode 作为第一个 TreeNode 元素的子元素。
　

<mytree:treeview runat="server">
<mytree:treenode text="我的第一个树节点">
<mytree:treenode text="我的第二个树节点">
</mytree:treenode>
</mytree:treenode>
</mytree:treeview>

保存并显示页面。
下图显示了 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" %>

<html>
<head>
</head>
<body>
<form id="myform" runat="server">
<mytree:treeview runat="server" ChildType="Folder">
<mytree:treenodetype Type="Folder"
ExpandedImageUrl="./images/folderopen.gif"
ImageUrl="./images/folder.gif" />
<mytree:treenode Text="Michigan">
<mytree:treenode Text="Detroit" />
<mytree:treenode Text="Farmington" />
<mytree:treenode Text="Southfield" />
</mytree:treenode>
<mytree:treenode Text="Washington" >
<mytree:treenode Text="Bellevue" />
<mytree:treenode Text="Redmond" />
<mytree:treenode Text="Woodinville" />
</mytree:treenode>
</mytree:treeview>
</form>
</body>
</html>
　

此功能要求安装 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 元素。其中，代表城市的节点嵌套在代表州的节点中。

<mytree:treeview runat="server" ChildType="Folder">
<mytree:treenodetype Type="Folder" ChildType="City"
ExpandedImageUrl="folderopen.gif" ImageUrl="folder.gif" />
<mytree:treenodetype Type="City" ImageUrl="html.gif" />
<mytree:treenode Text="Michigan">
<mytree:treenode Text="Detroit" />
<mytree:treenode Text="Farmington" />
<mytree:treenode Text="Southfield" />
</mytree:treenode>
<mytree:treenode Text="Washington" >
<mytree:treenode Text="Bellevue" />
<mytree:treenode Text="Redmond" />
<mytree:treenode Text="Woodinville" />
</mytree:treenode>
</mytree:treeview>

此功能要求安装 Microsoft® Internet Explorer 3.0 或更高版本。请单击下面的图标以安装最新版本。然后重新加载本页面并查看示例。
注意，这里在 TreeView 和第一个 TreeNodeType 元素上使用了 ChildType 属性。TreeView 定义了其子项具有 Folder 类型，第一个 TreeNodeType 元素定义了其子项具有 City 类型。在此代码中，第二个 TreeNodeType 元素不具有 ChildType，因为该元素定义的是 TreeView 中最深的 TreeNodeType。
　

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

上一篇：关于 TreeView WebControl （三）下一篇：关于 TreeView WebControl （一）