当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > 利用Treeview实现树形列表

ASP.NET
asp.net css注释的影响
ASP.NET与数据库相关技巧
关于HtmlForm控件
三色交替的下拉列表框
精通ASP.NET中弹出窗口技术
ASP.NET Forums与现有系统整合方案示例
ASP.NET操作IIS中的虚拟目录
DataGrid与SQL Server 2000数据绑定
如何让Web应用程序在Client端实现导出报表功能
如何保证web app中的Send Email线程稳定性
关于用ASP.Net识别远程主机服务器种类
ASP.NET中上传下载文件
提高ASP.NET性能的方法
asp.net StreamReader 创建文件
asp.net如何生成图片验证码(简单)
一个.net 压缩位图至JPEG的代码
简单的SQL Server数据库数据读取与数据操作
获取网站的RSS聚合到自己的网页
.Net程序中整站通用的防SQL注入函数
asp.net生成缩略图及给原始图加水印的函数

ASP.NET 中的 利用Treeview实现树形列表


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 77 ::
收藏到网摘: n/a

以前,在WEB页面中如果想使用树形控件的话,往往会有些麻烦,有时甚至要自己写代码来达到用树形列表显示数据的目的。在asp.net中,我们可以很方便地使用由微软提供的InternetExploerWebControls控件来实现树形列表。在微软提供的这套InternetExploereWebControls控件集合中,包括有MultiPage,TabStrip,TOOLbar,Treeview控件。在这篇文章中,我们来看在ASP.net中如何使用Treeview控件和XML来实现树形列表。

微软的这套控件可以在http://asp.net/IEWebControls/Download.aspx?tabindex=0&tabid=1中下载,下载后运行setup安装就可以了。现在我们来试下用Treeview控件做个简单的例子。

在vs.net中新建一个WEB工程,之后在工具箱中,鼠标右键弹出的菜单中,选择“添加新项”,在自定义工具箱中,选择TREEVIEW控件(注意选择的是命名空间为MicrosoftInternetExploerewebcontrol的命名空间),按确定后,就可以在工具箱中出现Treeview控件了。

接着,将treeview控件拖拉到窗体中,切换到HTML视图,这时会发现有如下代码:

<%@RegisterTagPrefix="ie"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls"%>

当然,你可以改变TagPrefix的标记值,比如,改为FooBar,那么以后在引用Treeview控件时,就用如下方式引用:

<FooBar:TreeViewrunat="server".../>

现在,我们可以通过点选Treeview控件的属性框中的nodes属性,来为该树添加各类结点了,由于比较简单,这里不详细讲述。下面是添加完各类结点后的代码:

<formrunat="server">
 <ie:TreeViewrunat="server">
<ie:TreeNodeText="IsaacGibson"Expanded="True">
<ie:TreeNodeText="Birth-1766"/>
<ie:TreeNodeText="Death-1827"/>
<ie:TreeNodeText="Spouse">
<ie:TreeNodeText="RittyGibson"/>
<ie:TreeNodeText="Married1789"/>
<ie:TreeNodeText="Children">
<ie:TreeNodeText="PhoebeGibson">
<ie:TreeNodeText="Birth-1790"/>
<ie:TreeNodeText="Death-1884"/>
<ie:TreeNodeText="Spouse">
 <ie:TreeNodeText="JamesK.Mason"/>
 <ie:TreeNodeText="Married1819"/>
</ie:TreeNode>
 </ie:TreeNode>
 <ie:TreeNodeText="JohnGibson">
<ie:TreeNodeText="Birth-1793"/>
<ie:TreeNodeText="Death-1802"/>
。。。。。。
 </ie:TreeNode>
</ie:TreeView>
</form>

其中我们特别注意一下Expanded="True"中的Expanded属性,该属性当被设置为true时,则当页面被装载时,树形控件被全部展开。

以上是在设计时,静态添加数据到树形控件的方法。而由于XML实质上也是以树形结构来表示数据的结构,因此,就可以通过使用XML文件绑定到树形控件的方法,来动态加载数据到控件中去,其中有两种方法可以实现:

1)另外写一个符合TREEVIEW格式的XML文件

2)通过XSL将XML进行转换。

先来看下第一种方法,建一个XML文件作为例子,命名为aspnetbooks.xml:

<?xmlversion="1.0"encoding="UTF-8"?>
 <books>
<bookprice="34.95">
<title>TeachYourselfActiveServerPages3.0in21Days</title>
<authors>
 <author>Mitchell</author>
 <author>Atkinson</author>
</authors>
<year>1999</year>
 </book>

 <bookprice="29.95">
<title>DesigningActiveServerPages</title>
<authors>
 <author>Mitchell</author>
</authors>
<year>2000</year>
 </book>

 <bookprice="34.95">
<title>ASP.NET:Tips,Tutorials,andCode</title>
<authors>
 <author>Mitchell</author>
 <author>Mack</author>
 <author>Walther</author>
 <author>Seven</author>
 <author>Anders</author>
 <author>Nathan</author>
 <author>Wahlin</author>
</authors>
<year>2001</year>
 </book>

 <bookprice="24.95">
<title>ASPUnleashed</title>
<authors>
 <author>Walther</author>
</authors>
<year>1998</year>
 </book>
</books>

如果我们使用第一种方法,必须对XML进行重写,用以下的形式表示,才能绑定到树形控件中去。

<TREENODES>
 <treenodetext="...">
<treenodetext="...">
</treenode>

 <treenodetext="..."/>

 ...
</TREENODES>

就是说,根结点必须是treenodes(大小写都无所谓),每个子结点必须以<treenode>的形式排列。于是,我们对原来的XML文件改写为如下的形式:

<?xmlversion="1.0"encoding="UTF-8"?>
 <TREENODES>
<treenodetext="TeachYourselfActiveServer_u80?ages3.0in21Days">
 <treenodetext="Price-$34.95"/>
 <treenodetext="Authors">
 <treenodetext="Mitchell"/>
 <treenodetext="Atkinson"/>
</treenode>
<treenodetext="YearPublished-2000"/>
</treenode>

<treenodetext="DesigningActiveServerPages">
 <treenodetext="Price-$29.95"/>
 <treenodetext="Authors">
 <treenodetext="Mitchell"/>
</treenode>
<treenodetext="YearPublished-2000"/>
</treenode>
〈/TREENODES>

增加以下代码:

<formrunat="server">
<ie:TreeViewrunat="server">
<ie:TreeNoderunat="server"Text="ASP.NETBooks"Expanded="True"
TreeNodeSrc="aspnetbooks.xml"/>
</ie:TreeView>
</form>

这样就将该xml文件绑定到树形控件中去了,运行后可以看到结果:

ASP.NETBooks
TeachYourselfActiveServerPages3.0in21Days
DesigningActiveServerPages
ASP.NET:Tips,Tutorials,andCode
ProgrammingASP.NET

可以看到,使用第一种方法的确比较麻烦,不能对XML的结点进行筛选或者其他操作。而如果使用第二种方法的XSL,则可以根据需要随时对原来的XML进行格式的控制,十分方便。

在使用XSL时,可以用如下的方法对树形控件进行绑定:

<formrunat="server">
 <ie:TreeViewrunat="server">
<ie:TreeNoderunat="server"Text="ASP.NETBooks"Expanded="True"
TreeNodeSrc="aspnetbooks.xml"
TreeNodeXsltSrc="aspbooks.xsl"/>
 </ie:TreeView>
</form>

其中,treenodexsltsrc的属性中指定要转换的XSL文件,我们设计的XSL文件如下:

<xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform"version='1.0'>
 <xsl:templatematch="/books">
 <TREENODES>
<xsl:for-eachselect="book">
<treenode>
 <xsl:attributename="text">
<xsl:value-ofselect="title"/>
 </xsl:attribute>

<treenode>
 <xsl:attributename="text">
Price-$<xsl:value-ofselect="@price"/>
 </xsl:attribute>
</treenode>

<treenodetext="Authors">
 <xsl:for-eachselect="authors/author">
 <treenode>
<xsl:attributename="text">
 <xsl:value-ofselect="text()"/>
</xsl:attribute>
 </treenode>
</xsl:for-each>
 </treenode>

 <treenode>
<xsl:attributename="text">
YearPublished-<xsl:value-ofselect="year"/>
</xsl:attribute>
 </treenode>
</treenode>
</xsl:for-each>
</TREENODES>
</xsl:template>
</xsl:stylesheet>

在上面的XSL中,我们通过形如

<xsl:attributename="text">
<xsl:value-ofselect="title"/>
</xsl:attribute>

的属性设置,提取XML文件中每个结点的值,将其赋值给予treenode的text属性中。当然,也可以在XSL中使用XPATH等设置要显示的结点。

运行后,结果同样与用第一种方法的一样,能正确显示树形控件,而且灵活性比较高。