ASP.NET中使用TreeView控件

TreeView IE Web 控件入门

　　当 TreeView IE Web 控件在访问者浏览器中显示时，会显示一棵树，此树与 Windows 资源管理器中的树非常类似。不同的是，TreeView 可以由任意多个 TreeNode 对象组成。每个 TreeNode 对象都可以关联文本和图像。另外，TreeNode 还可以显示为超链接并与某个 URL 相关联。每个 TreeNote 还可以包括任意多个子 TreeNote 对象。包含 TreeNode 及其子节点的层次结构构成了 TreeView 控件所呈现的树结构。

　　假设您要构建一个用于显示家谱的 TreeView 控件。由于信息基本上不需要改动，因此您可能希望静态地指定 TreeView 结构。如果使用的是 Visual Studio .NET，则静态指定 TreeView 结构就像填写几份表格一样简单。首先，通过将 TreeView 控件从工具箱拖放到设计器中，将新的 TreeView 控件添加到 ASP.NET Web 页中。然后，将 TreeView 控件的 ID 属性设置为 tvFamilyTree。完成这两个步骤后，您的屏幕应该与图 1 类似。


图 1：简单的 TreeView

　　现在，要静态指定组成 TreeView 的 TreeNode。请从 Properties（属性）窗格中选择 Nodes（节点）属性，然后单击此属性右侧的省略号按钮。这时将显示 TreeNodeEditor（TreeNode 编辑器）对话框。现在可以将新的 TreeNode 添加到 TreeView 中。图 2 显示了输入家族树信息后的 TreeNodeEditor（TreeNote 编辑器）对话框。


图 2：TreeNodeEditor（TreeNote 编辑器）对话框

　　填充 TreeNodeEditor（TreeNote 编辑器）对话框后，以下标记将被添加到 ASP.NET Web 页的 .aspx 部分：

＜ie:TreeView id="tvFamilyTree" runat="server"＞ ＜ie:TreeNode Text="John Smith"＞ ＜ie:TreeNode Text="Born: Jan. 3rd, 1885"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Died: Feb. 13, 1919"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Spouse"＞ ＜ie:TreeNode Text="Marie Ellsworth"＞ ＜ie:TreeNode Text="Born: Aug. 1, 1889"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Died: Unknown"＞＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜ie:TreeNode Text="Children"＞ ＜ie:TreeNode Text="John Smith, Jr."＞ ＜ie:TreeNode Text="Born: July 4, 1891"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Died: Sept. 22, 1893"＞＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜ie:TreeNode Text="Mary Smith"＞ ＜ie:TreeNode Text="Born: June 7, 1893"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Died: Aug. 13, 1949"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Spouse"＞ ＜ie:TreeNode Text="Edward Joy"＞ ＜ie:TreeNode Text="Born: Unknown"＞＜/ie:TreeNode＞ ＜ie:TreeNode Text="Died: Aug. 13, 1949"＞＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜ie:TreeNode Text="Children"＞ ＜ie:TreeNode Text="Michael Joy"＞ ＜ie:TreeNode Text="Born: Oct. 8, 1918"＞＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜ie:TreeNode Text="Michele Joy"＞ ＜ie:TreeNode Text="Born: May 21, 1920"＞＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeNode＞ ＜/ie:TreeView＞

　　如果不是使用 Visual Studio .NET 作为编辑器，则需要将此内容手动添加到 ASP.NET Web 页。当通过浏览器查看 ASP.NET Web 页时，将显示一棵可展开的树，如图 3 所示。（图 3 显示了展开各个节点后的树。默认情况下，将仅显示根节点。您可以设置 TreeNote 的 Expanded 属性，以指示首次查看此页面时该 TreeNote 应为展开状态。）


图 3：展开的 TreeNote

　　除了文本标签以外，TreeNote 还可以关联图像。尤其值得说明的是，每个 TreeNote 可以关联三幅图像：当 TreeNote 处于标准（折叠）状态时显示一幅图像；当 TreeNote 处于展开状态时显示另一幅图像；当 TreeNote 处于选中状态（当用户单击 TreeNote 时，该节点变为选中状态）时显示第三幅图像。这三种属性都需要一个指向指定图像的 URL。

　　例如，可以通过以下方法展开家族树演示：将 TreeView 的 ImageUrl 属性设置为指向某个闭合的文件夹图像的 URL，将 TreeView 的 ExpandedImageUrl 属性设置为指向某个打开的文件夹图像的 URL，从而分别将折叠和已展开的 TreeNote 显示为闭合的文件夹和打开的文件夹。（如果要为选定的 TreeNote 换一幅图像，只需要将 TreeView 的 SelectedImageUrl 属性设置为相应的 URL 即可。）

　　请注意，TreeView 和 TreeNote 都具有 ImageUrl、ExpandedImageUrl 和 SelectedImageUrl 属性。不同的是，当设置 TreeView 的属性时，默认情况下，TreeView 中所有 TreeNote 都将显示指定的图像； 如果设置 TreeNote 的属性，则这些属性仅适用于当前特定的 TreeNote。由于我们希望所有 TreeNote 处于折叠状态时显示为闭合的文件夹，处于展开状态时显示为打开的文件夹，因此我们对 TreeView 控件的 ImageUrl 和 ExpandedImageUrl 属性进行了设置。

　　设置完这些新属性后，图 3 的外观增色很多。在新的 TreeView 外观中，TreeNote 旁边都显示有图像，如图 4 所示。


图 4：带图像的 TreeNote

　　TreeNote 也可以关联 URL。当单击关联有 URL 的 TreeNote 时，会自动将用户快速链接到指定的 URL。TreeNote 的 NavigateUrl 属性用于指示当单击 TreeNote 时将用户链接到的 URL。该功能对于包含两个窗框的 ASP.NET Web 页非常有用。左侧窗框中包含一个 TreeView 控件。当用户单击某个 TreeNote 时，该节点的详细信息将显示在右侧窗框中，这与在 Windows 资源管理器中单击左侧窗格中的某个系统文件夹，该文件夹的文件将显示在右侧窗格中的情形类似。

　　要关联 URL，只需要将每个 TreeNote 的 NavigateUrl 设置为相应的 URL。要将 TreeNote 的关联 URL 加载到其他浏览器窗框中，请将 TreeNote 的 Target 属性设置为相应的窗框名称。这些步骤都可以通过 TreeNodeEditor（TreeNote 编辑器）来完成。要查看此类应用程序的示例，请参阅 Steve Sharrock 关于使用 TreeView 创建资源管理器风格的 ASP.NET Web 应用程序的文章：TreeView - Programming an Explorer-style Site View。