TreeView学习
1.什么是
TreeView?
TreeView
是一个
ASP.NET
服务器控件,可以生成用于显示分层数据的用户界面
2.适用的数据结构:
适用
分层的数据集、文件夹视图以及其他类似的数据结构。
3
.如何实现
TreeView?
(1)
通过声明的方式创建
(2)
客户端或服务器上通过编程以多种方式来实现
4
.
TreeView
创建方法:
(1)
手动创建
(2)
使用
vs.net
中的
TreeView Editor
创建
5
.
TreeView
元素
TreeView
定义一个
TreeView
TreeNodeType
定义一个节点类型,适用
TreeView
中的一个或一组节点
TreeNode
在
TreeView
中创建一个节点
注:
TreeView
是
TreeNode
和
TreeNodeType
的容器
这些元素共同定义了数视图的结构、布局、
外
观。
TreeView
不能包含这三种元素之外的任何
HTML
元素
6
.
编写简单的
TreeView
(1).
创建一个
web application,
命名为:
webcontrols
(2).
创建一个空页面
(3).
添加命名空间引用,即添加
“
<%@ import namespace="Microsoft.Web.UI.WebControls" %>
”
(4).
添加
@ Register
指令
即添加:
<%@ Register TagPrefix="mytree"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls,Version=1.0.2.226,Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
(5).
添加文档结构
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
(6).
添加
form
所有
WebControl
元素必须在一个
FORM
元素中建立
<BODY>
<FORM runat="server"></FORM>
</BODY>
(7).
添加一个
TreeView
元素。
<BODY>
<FORM runat="server">
<mytree:treeview runat="server"></mytree:treeview>
</FORM>
</BODY>
(8).
向
TreeView
添加一个
TreeNode
。
<mytree:treeview runat="server">
<mytree:treenode text="
节点一
">
</mytree:treenode>
</mytree:treeview>
(9).
添加第二个
TreeNode
。
<mytree:treeview runat="server">
<mytree:treenode text="
节点一
">
<mytree:treenode text="
节点二
">
</mytree:treenode>
</mytree:treenode>
</mytree:treeview>
7.
数据绑定
TreeView 也支持数据绑定,因此可以生成动态的内容,下面的示例显示的 TreeView 与前一个示例类似,但没有使用静态内容,而是使用了可扩展标记语言 (XML) 文件来提供 UI 的数据源
<booktree:treeview runat="server" AutoPostBack="true">
<booktree:treenode Text="book" AutoPostBack=true "
Expanded="true" TreeNodeSrc="http:// EventArgs/webcontrols/treeview/book.xml">
</booktree:treenode>
</booktree:treeview>
book.xml
文件包含以下内容:
<TREENODES>
<treenode Text="CSharp">
<treenode Text="Deep inside Csharp"/>
<treenode Text="Advanced Csharp"/>
<treenode Text="Extend Csharp"/>
</treenode>
<treenode Text="VBdotNet" >
<treenode Text="vb.net leader"/>
<treenode Text="From vb to vb.net"/>
<treenode Text="Dotnet with VB.net"/>
</treenode>
</TREENODES>
8
.用
XML
和
SQL Server
进行数据绑定
WebControls
元素也可以使用其他
XML
数据提供程序,如下所示:
<ie:treenode Text="root" type="tree" Expanded="true"
TreeNodeSrc="http://EventArgs/mySQLXML?sql=execute+sp_bookXML+@pid=1" />
该示例使用了一种更高级的技术。
TreeNodeSrc
属性被设置为一个
URL
,后者执行
Microsoft SQL Server(tm)
数据库上的一个存储过程来动态生成
XML
数据岛。
9
.编程
前面给出的示例表明,多数情况下编写一个功能完备的
UI
元素不需要任何编程工作。本节简要介绍一些可用于
TreeView
的简单的脚本编写技术。
TreeView
事件
通过将
AutoPostBack
属性设置为
true
可以将用户交互产生的事件导向服务器。同时处理高级浏览器和低级浏览器事件时应该使用服务器端脚本,因为低级页面内容中没有使用
Internet Explorer 5.5
或更高版本中所使用的丰富的
DHTML
行为。
对于包含
TreeView
的
Web
页面,用户的主要交互是展开和折叠树中的节点来浏览内容。下面的示例代码显示了如何使用
C#
在
Web
窗体中处理
onexpand
、
oncollapse
和
onselectedindexchange
事件。
<script language="C#" runat="server">
void Expand(object sender, TreeViewClickEventArgs e)
{
mylabel.InnerText += "
已展开
(
节点索引
= " + e.Node.ToString() + ")";
}
void Collapse(object sender, TreeViewClickEventArgs e)
{
mylabel.InnerText += "
已折叠
(
节点索引
= " + e.Node.ToString() + ")";
}
void SelectChange(Object sender, TreeViewSelectEventArgs e)
{
mylabel.InnerText += "
已选中
" + e.NewNode.ToString() + " (
旧节点
索引
=" + e.OldNode.ToString()+")" ;
}
</script>
在此脚本中,需要具有一个
id
为
_label
的元素。
<div id=_label runat="server">Event Log: </div>
注意:此标记必须放在
TreeView
使用的
FORM
元素内。
可以通过编程或使用
TreeView
的属性将
C#
脚本中的函数加入到事件中,如下所示:
<mytree:treeview
onexpand="Expand"
oncollapse="Collapse"
onselectedindexchanged="SelectChange"
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
标记前缀。
|