TreeView Web 服务器控件用于以树形结构显示分层数据
如目录或文件目录
一TreeView 控件支持下面的功能
·自动数据绑定该功能允许将控件的节点绑定到分层数据(如 XML 文档)
·通过与 SiteMapDataSource 控件集成提供对站点导航的支持
·可以显示为可选择文本或超链接的节点文本
·可通过主题用户定义的图像和样式自定义外观
·通过编程访问 TreeView 对象模型使您可以动态地创建树填充节点以及设置属性等
·通过客户端到服务器的回调填充节点(在受支持的浏览器中)
·能够在每个节点旁边显示复选框
二背景
TreeView 控件可以显示几种不同类型的数据在控件中以声明方式指定的静态数据绑定到控件的数据或作为对用户操作的响应通过执行代码添加到 TreeView 控件中的数据
显示静态数据
可以通过创建 TreeNode 元素集合这些元素是 TreeView 控件的子级在 TreeView 控件中显示静态数据这些子元素也被称为子节点
下面的示例演示用于 TreeView 控件的标记该控件包含三个节点其中两个节点具有子节点
<asp:TreeView ID=MyTreeView Runat=server>
<Nodes>
<asp:TreeNode Value=Child Expanded=True Text=>
<asp:TreeNode Value=Grandchild Text=A />
<asp:TreeNode Value=Grandchild Text=B />
</asp:TreeNode>
<asp:TreeNode Value=Child Text= />
<asp:TreeNode Value=Child Expanded=True Text=>
<asp:TreeNode Value=Grandchild Text=A />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
将数据绑定到 TreeView 控件
可以将 TreeView 控件绑定到支持 IHierarchicalDataSource 接口的数据源例如 XmlDataSource 和 SiteMapDataSource 控件此外在绑定数据时还可以完全控制要从数据源填充哪些字段
使用 TreeNodeCollection 以编程方式显示数据
通过访问 Nodes 属性(该属性将返回 TreeNodeCollection 类)可以通过编程向 TreeView 控件填充数据TreeNodeCollection 是 TreeNode 对象的强类型集合TreeNode 对象含有一个名为 ChildNodes的属性由于该属性可进一步包含 TreeNode 对象所以 TreeNodeCollection 类是一个表示 TreeView 控件的所有节点的分层数据结构
TreeView 节点类型
TreeView 控件由一个或多个节点构成树中的每个项都被称为一个节点由 TreeNode 对象表示下表描述了三种不同的节点类型
节点类型
说明
根节点
没有父节点但具有一个或多个子节点的节点
父节点
具有一个父节点并且有一个或多个子节点的节点
叶节点
没有子节点的节点
尽管一个典型的树结构只有一个根节点但 TreeView 控件允许您向树结构中添加多个根节点当您要显示项目列表但不显示单个主根节点时(例如在产品类别列表中)这一功能很有用
每个节点都具有一个 Text 属性和一个 Value 属性Text 属性的值显示在 TreeView 控件中而 Value 属性则用于存储有关该节点的任何附加数据(例如传递给与节点相关联的回发事件的数据)
单击 TreeView 控件的节点时将引发选择事件(通过回发)或导航至其他页未设置 NavigateUrl 属性时单击节点将引发 SelectedNodeChanged 事件您可以处理该事件从而提供自定义的功能每个节点还都具有 SelectAction 属性该属性可用于确定单击节点时发生的特定操作例如展开节点或折叠节点若要在单击节点时不引发选择事件而导航至其他页可将节点的 NavigateUrl 属性设置为除空字符串 () 之外的值
即需填充 TreeNode 数据
静态定义数据结构有时是不可行的或者数据可能会依赖运行时收集的信息为了动态显示数据TreeView 控件支持动态节点填充将 TreeView 控件配置为即需填充时该控件将在用户展开节点时引发事件事件处理程序检索相应数据然后填充到用户单击的节点若要以数据即需填充 TreeNode 对象请将节点的 PopulateOnDemand 属性设置为 true并创建 TreeNodePopulate 事件处理程序以向 TreeNode 对象中填充数据
客户端 TreeView 节点填充
任何在浏览器功能配置文件中将 SupportsCallback 属性设置为 true 的浏览器都支持客户端节点填充
借助客户端节点填充TreeView 控件可以通过从客户端脚本中调用服务器的 TreeNodePopulate 事件来填充节点而无需完全回发至服务器
启用客户端脚本
默认情况下在高级 (Uplevel) 浏览器中TreeView 控件上的节点的展开 折叠功能是使用客户端脚本执行的由于控件不需要回发至服务器来呈现新配置所以使用客户端脚本可以提高呈现的效率
说明 如果浏览器中的客户端脚本被禁用或浏览器不支持客户端脚本则 TreeView 控件将恢复到低级(Downlevel)模式并在每次用户单击节点时回发到服务器
TreeView 回发
默认情况下除非浏览器不支持客户端脚本或者 EnableClientScript 属性被设置为 false否则 TreeView 控件将在客户端处理展开 折叠功能如果 PopulateNodesFromClient 属性被设置为 true 并且浏览器支持客户端脚本那么 TreeView 控件将从服务器检索数据而不回发整页
当 TreeView 控件处于选择模式时每次用户单击节点时都将回发到服务器并引发 SelectedNodeChanged 事件
通常您应该在 TreeView 控件处于选择模式或正在动态填充节点时处理回发事件原因是 PopulateOnDemand 或 PopulateNodesFromClient 属性已设置为 true
将 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 属性
TreeNode 呈现
每个 TreeNode 对象包含四个 UI 元素下面的图像中显示了这些元素下面的表中还对其进行了描述
TreeNode UI 元素
项 说明
展开/折叠图像 一个可选图像指示是否可以展开节点以显示子节点默认情况下如果节点可以展开此图像将为加号 [+]如果此节点可以折叠则图像为减号 []
复选框 复选框是可选的以允许用户选择特定节点
节点图像 可以指定要显示在节点文本旁边的节点图像
节点文本 节点文本是在 TreeNode 对象上显示的实际文本节点文本的作用类似于导航模式中的超链接或选择模式中的按钮
除了自身的属性外TreeView 控件还支持每种节点类型的 TreeNodeStyle 控件的属性这些样式属性将重写应用于所有节点类型的 NodeStyle 属性
TreeView 还具有一个为所有节点指定缩进量级的 NodeIndent 属性节点会从呈现 TreeView 控件的一侧缩进对于从左向右呈现的区域设置而言这是指左侧而对于从右向左呈现的区域设置而言这是指右侧
当一个节点被选中或鼠标悬停于该节点上时可对该节点应用不同的样式当某个节点的 Selected 属性设置为 true 时将应用 SelectedNodeStyle 属性对于选中的节点该属性将重写任何未选择的样式属性当鼠标悬停于某个节点上时将应用 HoverNodeStyle 属性下面的图像和表描述了 TreeNodeStyle 属性
TreeNodeStyle 属性
节点属性 说明
NodeSpacing 指定整个当前节点与上下相邻的节点之间的垂直间距
VerticalPadding 指定在 TreeNode 文本顶部和底部呈现的间距
HorizontalPadding 指定在 TreeNode 文本左侧和右侧呈现的间距
ChildNodesPadding 指定 TreeNode 的子节点上方和下方的间距
ImageUrl 指定在 TreeNode 旁显示的图像的路径
在 TreeView 节点旁显示复选框
TreeView 控件的另一个自定义呈现功能是它可以通过使用 ShowCheckBoxes 属性在节点文本和图像之间显示复选框显示复选框允许用户一次选择多个节点这对于类似新闻组树结构的界面特别有用这样用户可以一次选择并订阅多个新闻组
使用 ExpandDepth 属性
默认情况下TreeView 控件将显示被展开的树的所有节点可以将 TreeView 控件配置为最初显示到任何深度要执行此操作可以将 ExpandDepth 属性设置为要显示的节点级别所对应的数字例如如果将 ExpandDepth 属性设置为 那么当站点最初呈现在客户端时将显示节点的两个级别或两个子节点
