WINDOWS资源管理器中的驱动器和其下的文件及文件夹就是按照一种层次结构来安排的，在这个控件集中有一个treeview控件为我们提供了一种按层次结构显示信息的方式。treeview控件包含了称做“节点”(node)的一些条目的一个列表。每一个节点都可以有自己的节点集合，从而提供了一种更深层的数据定义。每个节点都可以被折叠起来，从而允许访问者在一个treeview控件中查找，只看他所感兴趣的那一级的数据。就像WINDOWS的资源管理器一样。
本文将向你展示在ASP.NET页面上定义一个TREEVIEW控件所需要做的工作。
TreeView控件演示
首先得明确一点就是测试的环境，只要环境正确，接下来的工作就很轻松了：
要测试该控件，得有一个叫IE WebControls的文件，具体的文件可以点击这里下载或到微软的网站去下载：
下载地址
按照他提供的方法进行安装。如有不清楚，请仔细看清楚他的readme文档。
这里跳过下载方法，直接进入环境的配置：
IE Web Controls
1、双击安装完成，默认:系统盘:/program files/IE Web Controls目录下。
2、运行“程序——Microsoft Visual Studio.NET 2003 ——Visual Studio.NET 工具 ——Microsoft Visual Studio.NET 2003 命令提示符”，进入到IE Web Control 安装目录。
3、运行build.bat 。
4、运行xcopy /s /i ./build/Runtime (网站根目录，默认系统盘):/Inetpub/wwwroot/webctrl_client/1_0 /y 。
在”工具箱——web窗体“单击右键，选择“添加/移除项...”,在弹出对话框中选择.net framwork 组件，单击“浏览”，找到IE WebControl.dll 文件，添加上即可。
这样就配置好了运行环境。接下来进行实操作阶段了。
一、定义TreeView控件
代码拷贝框
下面来解释一下相应代码:
autoselect = "false"
当访问者在TreeView控件中对节点进行定位时,可以使用键盘上的箭头来进行这种定位.当这个TreeView控件的autoselect属性值设为TRUE时,可以使用键盘上的键来在treeview控件中滚动,以选聂一个条目.如果设置为false的话,则不允许这样做.
showplus="true"
当一个treeview控件中的两个节点收到一起的时候,你可以显示一个加号(+),访问者就知道这个节点可以展开.通过设置showplus属性,你可以控制在这个位置是否显示加号.如果这个属性值设为true将使用加号;否则不使用.
showlines="true"
在一个treeview控件中的两个节点之间,可以显示一些线条,通过设置showlines属性,你可以控制是否显示这样的线条.
Expandlevel=2
这个Treeview控件的Expandlevel属性用来确定在默认的情况下,沿着这个treeview控件的层次结构展开的级别数.
<iecontrols:treeview>
---------
</iecontrols:treeview>
在这个treeview控件定义的开始和结束标记之间,可以定义一些treenode控件.
二、在treeview控件中使用treenode控件
如果你创建一个treeview控件的话,就需要在其中添加一些treenode控件来显示一些信息.treenode控件显示为treeview控件的层次结构中的一个项.treenode控件可以包含了treeview控件;或者,该控件本身也可以独立存在.下面将向你展示如何在一个treeview控件中定义treenode控件.
本实例将显示我喜欢的一些网站,其中每个网站可以是一个独立的,或者在其下还有其它网站.这个treeview控件具有如下定义:
代码拷贝框
[Ctrl+A 全部选择 然后拷贝]
其中,定义了一个两级的节点.这个树状视图中包含了"设计类站点"和"编程类站点"这二个大节点,而"编程类站点"中又有两个子节点"ASP编程"和"asp.net编程",其中每个子节点又都定义了其他的节点.
要注意包含其他节点的treenode控件和独立的treenode控件之间的差别.当一个treenode控件中还有其它treenode控件时,这些子控件在其父控件的开始和结束标记之间进行定义:
<iecontrols:treenode text="">
</iecontrols:treenode>
但对于一个独立的treenode控件来说,其开始和结束标记是自包含的:
<iecontrols:treenode text="" />
当页面首次加载时,这就是整个视图节点的展开情况.由于这里的expandlevel属性值设为2,因此将显示到所有级别上的节点.此外还要注意的是,由于showlines属性和showplus属性都为true,因此在所有显示的这个视图中,连接节点间的线条和连接框都显示出来.
"我常去的站点"是当前选中的节点项.访问者可以敲击回车,或者在这个节点上点击鼠标.然后,访问者可以使用键盘上的箭头来沿着树状视图的层次结构进行定位。
三、在treeview控件中将treenode控件作为链接使用
在上面的教程中,"我常去的站点"在鼠标的点击下不能跳转到相应的站点,这样看来treeview控件好像失去了它的价值。其实不然,treenode的另一个应用方式就是作为链接来使用。当访问者选中一个treenode控件时,将被定向到与此节点相关联的一个站点。当需要从一个如同站点地图的页面中将访问者定向到一个位置时,这种应用是很有用的。不多说了,let's go!
代码拷贝框
[Ctrl+A 全部选择 然后拷贝]
其中treenode的结构与前面不同了,你可以通过设置text属性来设置在这个链接上显示的文本。navigateurl属性来设置为访问者将被重定向到的目标站点位置。同时,也可使用target属性来指定当选中某个链接时,是否希望将指定链接显示在一个新的窗口中。
以上所介绍的只是treeview控件最基本的功能,旨在于让各位。net爱好者认识treeview控件,我们还可以在treenode控件中使用图像,还可在treeview控件中使用样式,可以编写在treeview控件中选中某个treenode控件时触发运行的代码等等!
如果大家对本文感兴趣,想与我交流的话可去我的主页:http://www.lemongtree.net/发表您的看法!
本文所涉及到的控件也可到小站免费下载!
在下一篇将介绍如何用实现导航功能。
写完treeview控件后，有网友在小站留言本提出能否告之如何编写在选中某一treenode控件时运行指定的代码，今天抽时间写完了这个教程。
编写当在treeview控件中选中某个treenode控件时触发运行的代码
当在你的asp.net页面中添加一个treeview控件的时候，你可能想要编写一些代码，当在这个treeview控件中选中了一个节点项时，触发运行这段代码。treeview控件提供了一种事件，你可以为之编写相应的事件处理代码。这个事件为你提供了对被选中的节点，以及在选中此节点之前访问者所在的节点进行相关处理的可能。
这个asp.net页面将通过一个treeview控件以层次结构显示一个部门的列表。当访问者选中一个节点时，他将看到所选中节点的ID，以及在选中此节点之前他所在的节点的ID，这些信息是通过一个label控件的text属性来回显给访问者的。
<iecontrols:treeview
id="tvbasic"
onseletedindexchanged="node_selected"
autopostback="true"
runat="server"
>
请注意，其中的autopostback属性设置为true。这意味着当有一个treenode控件被选中时，本页面将被提交到服务器进行处理。当一个节点的选中状态发生改变时所触发运行的过程通过onselectedindexchange属性来指定。
在空上treeview控件，以像下面这样的方式定义了一引起treenodw控件：
<iecontrols:treenode text="设计站点"/>
当这个treeview控件中的节点选中状态发生改变时，将触发运行下列过程：
sub node_selected(s as object, e as treeviewselecteventargs)
lblmessage.text="你选择了:"&e.newnode.tostring()
end sub
编写当展开一个treenode时所触发运行的代码
当访问者展开一个treeview控件中的一个节点时，你可以需要运行一些代码。例如，你可能会在treeview控件中所使用的控件内定义页面。因此，当展开treeview中的一个treenode控件时，整个treeview控件的大小将会发生改变。在这种情况下，当发生节点展开的事件时，你将需要运行一段代码来重新调整而面中其余部分的尺寸。
示例：
当访问者选中了一个具有子控件的treenode控件时，这个控件将会展开。在这个页面中，每当展开一个treenode节点时，访问者都将会看到一条消息。
<iecontrols:treeview
id="tvbaxic"
onexpand="Node_expand"
autopostback="true"
runat="server"
>
请注意onexpand属性的使用。当有一个节点展开时，将会触发运行这个属性设定的那个过程。此外，由于qutopostback属性设为true，因而当有一个节点展开时，将会立即触发这一事件。
编写当treenode控件折叠时触发运行的代码
如果访问者在treeview控件中选中了某个节点而使其处于展开状态的话，你可以通过再次选以这个节点而将其折叠。当一个treenode控件折叠时，如果你想触发运行一段代码，则可以使用相应treeview控件的oncollapse事件来实现如：
<iecontrols:treeview
id="tvbaxic"
oncollapse="Node_collapse"
autopostback="true"
runat="server"
>
注意oncollapse属性的使用，当treenode折叠时，运行node_collpase子过程，剩下的事情大家可以自己完成了。
扫一扫
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
