Windows资源管理器中的驱动器和其下的文件及文件夹就是按照一种层次结构来安排的,在这个控件集中有一个treeview控件为我们提供了一种按层次结构显示信息的方式。treeview控件包含了称做“节点”(node)的一些条目的一个列表。每一个节点都可以有自己的节点集合,从而提供了一种更深层的数据定义。每个节点都可以被折叠起来,从而允许访问者在一个treeview控件中查找,只看他所感兴趣的那一级的数据。就像Windows的资源管理器一样。
首先得明确一点就是测试的环境,只要环境正确,接下来的工作就很轻松了:
要测试该控件,得有一个叫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控件
代码拷贝框
'导入名称空间 <%@ import namespace="Microsoft.web.UI.webcontros"%> '注册这个名称空间并为其给定一个TagPrefix,以便于对这个控件库中的控件进行定义 <%@ register tagprefix = "iecontrols" namespace="Microsoft.web.UI.webcontrols" assembly="microsoft.web.UI.webcontrols" %> '设置好指令后,就可以定义下面这样的一个treeview控件了 <iecontrols:treeview id="tvbasic" autoselect="false" shoplus="true" showlines="true" expandlevel=2 runat="server" > ---------- </idcontrols: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控件具有如下定义:
代码拷贝框
<iecontrols:treeview id="tvwebsite" autoselect ="false" showplus="true" showlines="true" expandlevel=2 runat = "server" > '接下来在treeview控件的开始和结束标记中,定义treenode控件 <iecontrols:treenode text="我常去的站点"> <idcontrols:treenode text="设计类站点"> <idcontrols:treenode text="蓝色理想" /> <idcontrols:treenode text="有风的日子" /> <idcontrols:treenode text="设计联盟" /> </iecontrols:treenode> <iecontrols:treenode text="编程类站点"> <iecontrols:treenode text="ASP编程"> <iecontrols:treenode text="ASP COOL" /> <iecontrols:treenode text=""/> </iecontrols:treenode> <iecontrols:treenode text="ASP.NET编程"> <iecontrols:treenode text="Dotnet技术网" /> <iecontrols:treenode text="asp.net"/> </iecontrols:treenode> <iecontrols:treenode text="程序员大本营" /> </iecontrols:treenode> </iecontrols:treenode> |
其中,定义了一个两级的节点.这个树状视图中包含了"设计类站点"和"编程类站点"这二个大节点,而"编程类站点"中又有两个子节点"ASP编程"和"asp.net编程",其中每个子节点又都定义了其他的节点.
要注意包含其他节点的treenode控件和独立的treenode控件之间的差别.当一个treenode控件中还有其它treenode控件时,这些子控件在其父控件的开始和结束标记之间进行定义:
<iecontrols:treenode text=""> </iecontrols:treenode> |
但对于一个独立的treenode控件来说,其开始和结束标记是自包含的:
<iecontrols:treenode text="" /> |
当页面首次加载时,这就是整个视图节点的展开情况.由于这里的expandlevel属性值设为2,因此将显示到所有级别上的节点.此外还要注意的是,由于showlines属性和showplus属性都为true,因此在所有显示的这个视图中,连接节点间的线条和连接框都显示出来.
"我常去的站点"是当前选中的节点项.访问者可以敲击回车,或者在这个节点上点击鼠标.然后,访问者可以使用键盘上的箭头来沿着树状视图的层次结构进行定位。