关于 TreeView WebControl (三)

翻译|其它|编辑:郝浩|2005-03-17 13:05:00.000|阅读 1952 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>


TreeView 上将 ChildType 声明为 Folder 后,需要使用 TreeNodeType 元素定义此类型。因此,示例中 TreeNodeType 元素的 Type 属性也将具有相同的值 Folder

ExpandedImageUrlExpandedImageUrlImageUrl 属性可以分别替代用于显示展开节点和正常节点的默认 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。

应用样式

WebControl 控件具有丰富的功能,在高级浏览器中它们可以支持鼠标和键盘操作。这意味着,根据用户的交互方式,TreeView UI 的元素可以具有不同状态。WebControl 提供了以下特殊属性,以简化基于元素的当前状态来自定义元素外观的过程。

  • DefaultStyle
     
  • HoverStyle
     
  • SelectedStyle

使用上述每个属性都可以定义一个或多个级联样式表 (CSS) 属性/值对。使用的格式与标准 CSS style 属性的用法相同。WebControl 支持字体、颜色和尺寸的最常用样式,但并不支持所有的 CSS 样式。

<mytree:treenode Text="我的漂亮的节点"
DefaultStyle="background:#CCCCCC;border:solid 1px;color:black;font-size:8pt"
HoverStyle="color:blue;font-name:Arial"
SelectedStyle="color:red;font-name:Arial;font-weight:bold-italic"
/>

另一种可用于设置文本格式的方法是直接将 HTML 应用到 Text 属性。

<mytree:treenode Text="<i>斜体文字</i> 和 <b>粗体文字</b>" />

数据绑定
TreeView 也支持数据绑定,因此可以生成动态的内容。下面的示例显示的 TreeView 与前一个示例类似,但没有使用静态内容,而是使用了可扩展标记语言 (XML) 文件来提供 UI 的数据源。

该示例使用 TreeNodeSrc 属性绑定到 state_city.xml 文件,并由该文件填充 TreeView。

<mydbtree:treeview runat="server" SystemImagesPath="../images/" AutoPostBack="true">
<mydbtree:treenode Text="North America" AutoPostBack=true imageurl="./images/root.gif"
Expanded="true" TreeNodeSrc="http://localhost/webcontrols/treeview/state_city.xml">
</mydbtree:treenode>
</mydbtree:treeview>

通过此代码段可以看出,.aspx 文件中的标记非常简洁。
state_city.xml 文件包含以下内容:

<TREENODES>
<treenode Text="Michigan">
<treenode Text="Detroit" />
<treenode Text="Farmington" />
<treenode Text="Southfield" />
</treenode>
<treenode Text="Washington" >
<treenode Text="Bellevue" />
<treenode Text="Redmond" />
<treenode Text="Woodinville" />
</treenode>
</TREENODES>

此功能要求安装 Microsoft® Internet Explorer 3.0 或更高版本。请单击下面的图标以安装最新版本。然后重新加载本页面并查看示例。

下面的示例显示了如何配合使用 TreeNodeTypeSrc 属性和 XML。该示例使用了两个 XML 文件,一个对应树节点,一个对应节点类型。通过向 UI 添加额外的自定义内容,我们建立了第一个数据绑定示例。

Web 页面的标记中仅使用了一个 TreeView 元素,如下所示

<mytree:treeview runat="server" SystemImagesPath="/webcontrols/images" AutoPostBack="true"
TreeNodeTypeSrc="http://localhost/webcontrols/TreeView/TreeNodeTypes.xml"
TreeNodeSrc="http://localhost/webcontrols/TreeView/country_state_city.xml">
</mytree:treeview>
 

TreeNodeTypes.xml 文件的内容如下所示:

<TREENODETYPES>
<TreeNodeType type="file" imageUrl="./images/html.gif" />
<TreeNodeType type="folder" imageUrl="./images/folder.gif" />
<TreeNodeType type="root" imageUrl="./images/root.gif" />
</TREENODETYPES>

此功能要求安装 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。

<myxmltree:treeview
id="tree1"
runat="server"
TreeNodeSrc = "nodes.xml"
TreeNodeXsltSrc = "template.xsl"
/>

nodes.xml 文件包含以下内容:

<?xml version="1.0" ?>
<HelpTOC>
<HelpTOCNode Title="Web 站点">
<HelpTOCNode Title = "Microsoft" Url = "http://www.microsoft.com">
</HelpTOCNode>
<HelpTOCNode Title = "MSDN" Url = "http://msdn.microsoft.com">
</HelpTOCNode>
</HelpTOCNode>
</HelpTOC>

template.xsl 文件包含以下内容:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'>
<xsl:template match="/">
<TREENODES>
<xsl:for-each select="HelpTOC/HelpTOCNode">

<xsl:element name="TreeNode">

<xsl:attribute name="Text" ><xsl:value-of select="@Title"/></xsl:attribute>
<xsl:attribute name="NavigateURL" ><xsl:value-of select="@Url"/></xsl:attribute>
<xsl:attribute name="TARGET" >main</xsl:attribute>

<xsl:for-each select="HelpTOCNode">

<xsl:element name="TreeNode">
<xsl:attribute name="Text" ><xsl:value-of select="@Title"/></xsl:attribute>
<xsl:attribute name="NavigateURL" ><xsl:value-of select="@Url"/></xsl:attribute>
<xsl:attribute name="Target" >main</xsl:attribute>
</xsl:element>

</xsl:for-each>

</xsl:element>
</xsl:for-each>
</TREENODES>
</xsl:template>
</xsl:stylesheet>

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 数据提供程序,如下所示:

<ie:treenode Text="root" type="tree" Expanded="true"
TreeNodeSrc="http://localhost/mySQLXML?sql=execute+sp_GenMyXML+@pid=1" />
 

该示例使用了一种更高级的技术。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 事件。

<script language="C#" runat="server">
void myExpandFn(object sender, TreeViewClickEventArgs e)
{
mylabel.InnerText += "已展开 (节点索引= " + e.Node.ToString() + ")";
}

void myCollapseFn(object sender, TreeViewClickEventArgs e)
{
mylabel.InnerText += "已折叠 (节点索引= " + e.Node.ToString() + ")";
}

void mySelectChangeFn(Object sender, TreeViewSelectEventArgs e)
{
mylabel.InnerText += "已选中 " + e.NewNode.ToString() + " (旧节点
索引=" + e.OldNode.ToString()+")" ;
}
</script>

 

在此脚本中,需要具有一个 id 为 mylabel 的元素。

<div id=mylabel runat="server">Event Log: </div>

注意:此标记必须放在 TreeView 使用的 FORM 元素内。
可以通过编程或使用 TreeView 的属性将 C# 脚本中的函数加入到事件中,如下所示:

<mytree:treeview
onexpand="myExpandFn"
oncollapse="myCollapseFn"
onselectedindexchanged="mySelectChangeFn"
autopostback="true"
runat="server">
</mytree:treeview>
 

进行 TreeView 编程时经常要使用 onexpand 和 oncollapse 事件。在本示例中,每次节点展开或折叠时,脚本都将添加到 div 元素的 innerText 中。

服务器端包含

由于 WebControls 是用 ASP.NET 建立的,所以也支持服务器端“包含”。下面的示例显示了其实现方法

<mytree:treeview runat="server">
<!-- #Include file="nodes.txt" -->
</mytree:treeview>
 

前面的示例使用了 nodes.txt 文件来填充一个 TreeView,下面我们使用包含文件来填充 TreeView 的两个单独的 TreeNode 分支。

<mytree:treeview runat="server">
<mytree:treenode Text="书籍" >
<!-- #Include file="Books.txt" -->
</mytree:treenode>
<mytree:treenode Text="杂志" >
<!-- #Include file="magazines.txt" -->
</mytree:treenode>
</mytree:treeview>

与 XML 数据绑定的命名空间前缀规则不同,包含文件的内容中的元素必须使用与其父元素相同的标记前缀。因此,books.txt 和 magazines.txt 文件的内容应使用 mytree 标记前缀。

性能提示
本节提供了一些 TreeView 应用建议。

树的大小
建议不要在单个 TreeView 数据岛中显示大型分层数据集。作为一般规则,应尽量将一棵树中的节点数控制在 1000 以下。

每次更新一个 TreeView 控件的 UI(例如展开或折叠节点)时,都会向视图状态中追加数据,从而使数据状态保存了 Web 页面的状态变化历史记录。这意味着每次进行包含大量数据的视图更新时,追加到视图状态历史记录中的数据量也会增加。在 ASP.NET 中,视图状态的大小是有限制的,因此多次更新大型树层次结构可能导致性能问题,并且可能丢失部分历史记录。

 


标签:

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


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP