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

ASP.NET
FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用方法
.NET 常用功能和代码小结
在 .NET Framework 2.0 中未处理的异常导致基于 ASP.NET 的应用程序意外退出
asp.net IList查询数据后格式化数据再绑定控件
asp.net sql存储过程
asp.net 简单实现禁用或启用页面中的某一类型的控件
asp.net(c#)获取内容第一张图片地址的函数
The remote procedure call failed and did not execute的解决办法
ASP.NET 在线文件管理
asp.net 读取并修改config文件实现代码
ASP.NET Cookie 操作实现
asp.net Silverlight中的模式窗体
Silverlight中动态获取Web Service地址
asp.net Silverlight应用程序中获取载体aspx页面参数
asp.net 水晶报表隔行换色实现方法
asp.net 获取Gridview隐藏列的值
手动把asp.net的类生成dll文件的方法
asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页
动态指定任意类型的ObjectDataSource对象的查询参数
asp.net Md5的用法小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 81 ::
收藏到网摘: 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等设置要显示的结点。

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