6.3 TreeView控件

TreeView控件是一种应用较为灵活的导航控件，能够以站点地图和XML文档作为数据源，还可以在源代码中设置控件的属性和节点显示。

6.3.1 TreeView简介

TreeView能够搭建系统的框架，也叫树形视图控件。TreeView控件以层次或树形结构显示数据，通常与母版页结合，放在网站的左侧作为网站的框架。

XML格式的文件也可以用作数据源，与站点地图相比，XML格式文件没有条件限制，只要符合XML的标准即可。TreeView控件常用功能如下。

（1）站点导航，即导航到其他页面的功能。

（2）以文本或链接方式显示节点的内容。

（3）可以将样式或主题应用到控件及其节点。

（4）数据绑定，允许直接将控件的节点绑定到XML、表格或关系数据源。

（5）为节点实现客户端的功能。

（6）为每一个节点显示复选框按钮。

（7）使用编程方式动态设置控件的属性。

（8）实现节点的添加和填充等。

TreeView控件若使用站点地图作为数据源，则需要借助SiteMapDataSource数据源控件获取站点地图中的数据。由于一个网站中，默认只有一个站点地图，因此只要页面中有SiteMapDataSource控件和站点地图，那么SiteMapDataSource控件将自动获取站点地图中的数据，不需要开发人员对它们进行绑定。

导航功能需要有页面的逻辑结构和链接，但网站中页面的逻辑结构并不是固定不变的。如网购系统在创建初期只有服装、食品和家电这几个分类，但随着网站做大，需要新增手机数码、家居建材等分类，则需要改变原有的页面逻辑结构。TreeView控件能够实现节点的添加和填充，需要借助TreeNode对象的功能，将在6.3.3节中介绍。

TreeView控件由节点组成，包括父节点、子节点、叶节点和根节点，TreeView控件的常用属性及其说明如表6-2所示。

表6-2 TreeView控件的常用属性

为了动态显示数据，TreeView控件支持动态节点填充。将TreeView控件配置为即需填充时，该控件将在用户展开节点时引发事件。

事件处理程序检索相应数据，然后填充到用户单击的节点。当用户通过一些操作（例如选择、展开或折叠节点）与控件交互时，则会引发TreeView控件事件。与属性一样，TreeView控件包含多个事件，常用事件如表6-3所示。

表6-3 TreeView控件的常用事件

6.3.2 TreeView简单应用

TreeView简单应用包括直接应用站点地图中的数据和直接应用XML文档中的数据。这里的XML文档必须符合站点地图节点特点，以下详细介绍TreeView与站点地图的结合和TreeView与XML文档的结合。

1.TreeView与站点地图

在页面中添加TreeView控件，则设计窗口如图6-4所示。单击控件右上方的箭头按钮可选择TreeView任务，由于页面中没有SiteMapData Source数据源控件，因此TreeView任务对话框中没有数据源。

图6-4 TreeView控件

TreeView借助SiteMapDataSource控件和站点地图的使用方式很简单，只需要在页面中添加SiteMapDataSource，并为TreeView绑定该SiteMapDataSource即可。如对范例1中的站点地图进行修改，在男装节点下新增【上衣】和【裤子】子节点，修改部分代码如下所示。

        <! --省略部分代码，参考范例1-->
        <siteMapNode url="" title="男装"  description="">
            <siteMapNode url="cloth.aspx" title="上衣"  description="" />
            <siteMapNode url="" title="裤子"  description="" />
        </siteMapNode>
        <! --省略部分代码，参考范例1-->

【范例2】

在项目中新建cloth.aspx页面，省略页面代码。向页面中添加SiteMapPath控件和TreeView控件，显示上述站点地图中的页面逻辑，查看它们的显示效果，步骤如下。

（1）向页面中添加SiteMapPath控件，只需将控件从工具箱中拉到设计界面即可。其页面代码如下所示。

        <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>

（2）TreeView控件需要借助SiteMapDataSource控件来获取数据，因此需要先添加SiteMapDataSource控件，该控件自动绑定站点地图，代码如下。

        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

（3）接着需要添加TreeView控件，并绑定上述SiteMapDataSource。绑定时只需单击TreeView控件右上端的箭头按钮，在选择数据源下拉框中选中上述SiteMapDataSource1即可，如图6-5所示。

图6-5为TreeView选择数据源

（4）选择好数据源的TreeView控件，其页面代码如下。

        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapData
        Source1" Width="194px"></asp:TreeView>

（5）运行该页面，其效果如图6-6所示。在页面的左侧中间位置，有SiteMapPath控件所显示的样式：网购系统首页>服装>男装>上衣，可单击链接进入上层页面。在页面的左侧下方位置有TreeView控件样式，呈现站点地图中的所有页面。

图6-6 SiteMapPath控件和TreeView控件的显示效果

2.TreeView与XML文档

除了可以显示站点地图数据，TreeView控件还可以显示XML文档数据。这里以范例的形式介绍XML文档的使用。

【范例3】

定义XML文档内容为网站的页面逻辑，修改图6-6中的TreeView控件使其显示XML文档中的页面结构，步骤如下。

（1）首先向项目中添加XML文档，在项目名称处右击，在【添加新项】窗体左侧选择【数据】选项，右侧选择【XML文件】选项，为文件命名并单击【添加】按钮完成添加。为了区分XML文档与站点地图，定义与站点地图不一样的页面结构，其XML文档代码如下。

        <? xml version="1.0" encoding="utf-8" ? >
        <siteMapNode url="" title="网购系统首页"  description="首页">
            <siteMapNode url="" title="服装"  description="">
              <siteMapNode url="" title="男装"  description="">
                  <siteMapNode url="cloth.aspx" title="上衣"  description="" />
                  <siteMapNode url="" title="裤子"  description="" />
              </siteMapNode>
              <siteMapNode url="" title="女装"  description="">
                  <siteMapNode url="" title="上衣"  description="" />
                  <siteMapNode url="" title="裤子"  description="" />
                  <siteMapNode url="" title="连体裤"  description="" />
                  <siteMapNode url="" title="连衣裙"  description="" />
              </siteMapNode>
              <siteMapNode url="" title="内衣"  description="" />
            </siteMapNode>
            <siteMapNode url="" title="家电"  description="">
              <! --省略部分代码-->
            </siteMapNode>
        </siteMapNode>

（2）修改TreeView控件的数据源，在如图6-5所示的【选择数据源】下拉框中选择【新建数据源】，打开【数据源配置向导】对话框，如图6-7所示。选择XML文档将自动创建一个数据源ID，单击【确定】按钮后进入【配置数据源】对话框，如图6-7所示。单击【数据文件】文本框右侧的【浏览】按钮，即可进入选择XML文档的页面，选择XML文档后确定，即可绑定TreeView控件与XML文档。

图6-7 选择XML文档

（3）在绑定了TreeView控件与XML文档之后，系统并不会显示XML文档中的页面结构，这是因为XML文档的页面节点并没有固定的格式要求。如节点名称可以是任意名称，而不需要像站点地图一样使用siteMap或siteMapNode；同时页面的标题和链接属性也不需要像站点地图一样使用title和url。因此在绑定了文档之后，需要对节点的标题和链接属性进行绑定，否则系统因无法识别页面的属性而仅显示节点名称，如图6-8所示。

图6-8 XML文档绑定

（4）如图6-8所示，选择【TreeView任务】面板中的【编辑TreeNode数据绑定】项，可进入【TreeView DataBindings编辑器】对话框，如图6-8所示。在【可用数据绑定】区域内选择需要绑定的节点并单击【添加】按钮，可在右侧看到该节点的属性。其中，TextField属性对应页面的标题，选择XML文档中对应的title属性，如图6-8所示；NavigateUrlField属性对应页面的链接地址属性，选择XML文档中对应的url。在单击【确定】按钮后可回到页面的设计窗体看到被绑定的页面效果。

（5）运行该页面，其效果如图6-9所示。页面的链接默认使用蓝色字体显示。

图6-9 TreeView绑定XML文档

6.3.3 TreeNode对象

TreeNode对象本身可以理解为TreeView的节点，因此TreeView控件对节点的操作可以理解为对TreeNode对象的操作。

TreeNode对象在执行中有两种模式：选择模式和导航模式。这是TreeView控件节点特有的，内容如下。

（1）选择模式：单击节点会回发页面并引发TreeView.SelectedNodeChanged事件，这是默认的模式。

（2）导航模式：单击后导航到新页面，不会触发上述事件。只要NavigateUrl属性非空，TreeNode就会处于导航模式。

由于站点地图中，每一个<siteMapNode>节点都要提供一个URL信息，因此绑定到站点地图的TreeNode都属于导航模式。页面的逻辑结构要求页面节点也有着逻辑结构，节点中也有着与节点结构相关的名称，如“父节点”和“子节点”，如下所示。

（1）包含其他节点的节点称为“父节点”。

（2）被其他节点包含的节点称为“子节点”。

（3）没有子节点的节点称为“叶节点”。

（4）不被其他任何节点包含同时是所有其他节点的上级的节点是“根节点”。

一个节点可以同时是父节点和子节点，但是不能同时为根节点、父节点和叶节点。节点为根节点、子节点还是叶节点决定着节点的几种可视化属性和行为属性。

虽然一个树结构中只有一个根节点，但是TreeView控件允许开发人员向树结构中添加多个根节点。当用户要显示项目列表，但不显示单个主根节点时（如产品类别列表），这一功能很有用。

页面节点有着独特的属性，如页面的标题、链接、节点图片等属性，如表6-4所示。

表6-4 TreeNode对象的常用属性

单击TreeView控件的节点将引发选择事件（通过回发）或导航至其他页，如果未设置NavigateUrl属性，单击某个节点将引发SelectedNodeChanged事件，该事件可用于提供自定义功能。

【范例4】

向TreeView控件中添加根节点，页面的标题是“会员中心”，页面的地址是“vip.aspx”，代码如下。

        TreeNode tn = new TreeNode();          //创建节点
        tn.Text ="会员中心";                    //为节点名称赋值
        tn.NavigateUrl = "vip.aspx"; 
        TreeView1.Nodes.Add(tn);               //将节点添加为TreeView1的根节点

上述代码将新增一个与“网购系统首页”相同等级的页面，相当于两个根元素。这样的添加方式只是在页面中显示新节点，并没有更新到数据源文件中。

6.3.4 TreeView样式

TreeView有一个细化的样式模型，通过对样式的设置，可以完全控制TreeView的外观。

TreeView的样式控制可以具体到一个节点，其样式的控制由TreeNodeStyle类来实现。TreeNodeStyle继承自更常规的Style类。除了设置导航的前景色、背景色、字体和边框，还能引入如表6-5所示的样式属性。

表6-5 TreeNodeStyle样式属性

TreeView导航节点可以用表格呈现，因此可以设置文字边距和节点间距。除了在表6-5中列举的属性以外，TreeView还有以下几个高级属性。

（1）TreeView.NodeIndent属性：用于设置树结构里各个子层级间缩进的像素数。

（2）TreeView.ShowExpandCollapse属性：用于关闭树中的节点列。

（3）TreeView.ShowCheckBoxes属性：设置节点边是否显示复选框。

（4）TreeNode.ShowCheckBox属性：设置单个节点边是否显示复选框。

要对树的所有节点应用样式，可以使用TreeView.NodeStyle属性，而要为特定的节点设置样式，需要首先选择节点。TreeView控件支持节点层次的样式，如父节点层次的样式与子节点层次上的样式不同。节点层次的选择需要使用如表6-6所示的属性。

表6-6 节点层次的选择

样式的执行优先级与页面元素的样式优先级类似，遵循从通用到特定的规律，如SelectedNodeStyle样式将覆盖RootNodeStyle的样式设置。

另外，通过TreeViewNode.ImageUrl可以为节点设置图片。通常需要为整个树形导航设置一组风格一致的图片，因此可定义的节点属性有4种，如表6-7所示。

表6-7 节点指示符属性

ASP.NET系统中提供了16种内置的节点图片以供选择，可在设计界面中，TreeView控件的ImageSet属性中直接选择。

为TreeView控件分配图像的最简单方法是使用ImageSet属性。内置于TreeView控件中的图像集包括树中用于MSN Messenger、Microsoft Outlook、Windows Explorer和Microsoft Windows帮助的常见图像资源集。图像集还包括几种项目符号样式，可以通过获取ImageSet属性查看所有的图像集。