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"

1
2(4).  添加  @ Register  指令 
3
4即添加: 

@ Register TagPrefix="mytree"

Namespace="Microsoft.Web.UI.WebControls"

Assembly="Microsoft.Web.UI.WebControls,Version=1.0.2.226,Culture=neutral, PublicKeyToken=31bf3856ad364e35"

1
2(5).  添加文档结构
``` (6). 添加 form

所有 WebControl 元素必须在一个 FORM 元素中建立

1<body>
2<form runat="server"></form>
3</body>

(7). 添加一个 TreeView 元素。

1<body>
2<form runat="server">
3<mytree:treeview runat="server"></mytree:treeview>
4</form>
5</body>

(8). 向 TreeView 添加一个 TreeNode 。

1<mytree:treeview runat="server">
2<mytree:treenode text="  节点一  ">
3</mytree:treenode>
4</mytree:treeview>

(9). 添加第二个 TreeNode 。

1<mytree:treeview runat="server">
2<mytree:treenode text="  节点一  ">
3<mytree:treenode text="  节点二  ">
4</mytree:treenode>
5</mytree:treenode>
6</mytree:treeview>

7. 数据绑定

TreeView 也支持数据绑定,因此可以生成动态的内容,下面的示例显示的 TreeView 与前一个示例类似,但没有使用静态内容,而是使用了可扩展标记语言 (XML) 文件来提供 UI 的数据源

1<booktree:treeview autopostback="true" runat="server">
2<booktree:treenode "="" autopostback="true" expanded="true" text="book" treenodesrc="http:// EventArgs/webcontrols/treeview/book.xml  ">
3</booktree:treenode>
4</booktree:treeview>

book.xml 文件包含以下内容:

 1<treenodes>
 2<treenode text="CSharp">
 3<treenode text="Deep inside Csharp"></treenode>
 4<treenode text="Advanced Csharp"></treenode>
 5<treenode text="Extend Csharp"></treenode>
 6</treenode>
 7<treenode text="VBdotNet">
 8<treenode text="vb.net leader"></treenode>
 9<treenode text="From vb to vb.net"></treenode>
10<treenode text="Dotnet with VB.net"></treenode>
11</treenode>
12</treenodes>

8 .用 XML 和 SQL Server 进行数据绑定

WebControls 元素也可以使用其他 XML 数据提供程序,如下所示:

1<ie:treenode expanded="true" text="root" treenodesrc="http://EventArgs/mySQLXML?sql=execute+sp_bookXML+@pid=1" type="tree"></ie:treenode>

该示例使用了一种更高级的技术。 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 事件。

 1<script language="C#" runat="server">
 2
 3void Expand(object sender, TreeViewClickEventArgs e) 
 4
 5{ 
 6
 7mylabel.InnerText += "  已展开  (  节点索引  = " + e.Node.ToString() + ")"; 
 8
 9} 
10
11void Collapse(object sender, TreeViewClickEventArgs e) 
12
13{ 
14
15mylabel.InnerText += "  已折叠  (  节点索引  = " + e.Node.ToString() + ")"; 
16
17} 
18
19void SelectChange(Object sender, TreeViewSelectEventArgs e) 
20
21{ 
22
23mylabel.InnerText += "  已选中  " + e.NewNode.ToString() + " (  旧节点 
24
25索引  =" + e.OldNode.ToString()+")" ; 
26
27} 
28
29</script>

在此脚本中,需要具有一个 id 为 _label 的元素。

1<div id="_label" runat="server">Event Log: </div>

注意:此标记必须放在 TreeView 使用的 FORM 元素内。

可以通过编程或使用 TreeView 的属性将 C# 脚本中的函数加入到事件中,如下所示:

1<mytree:treeview autopostback="true" oncollapse="Collapse" onexpand="Expand" onselectedindexchanged="SelectChange" runat="server">
2</mytree:treeview>

进行 TreeView 编程时经常要使用 onexpand 和 oncollapse 事件。在本示例中,每次节点展开或折叠时,脚本都将添加到 div 元素的 innerText 中。

服务器端包含

由于 WebControls 是用 ASP.NET 建立的,所以也支持服务器端“包含”。下面的示例显示了其实现方法。

1<mytree:treeview runat="server">
2<!-- #Include file="nodes.txt" -->
3</mytree:treeview>

前面的示例使用了 nodes.txt 文件来填充一个 TreeView ,下面我们使用包含文件来填充 TreeView 的两个单独的 TreeNode 分支。

1<mytree:treeview runat="server">
2<mytree:treenode text="  书籍  ">
3<!-- #Include file="Books.txt" -->
4</mytree:treenode>
5<mytree:treenode text="  杂志  ">
6<!-- #Include file="magazines.txt" -->
7</mytree:treenode>
8</mytree:treeview>

与 XML 数据绑定的命名空间前缀规则不同,包含文件的内容中的元素必须使用与其父元素相同的标记前缀。因此, books.txt 和 magazines.txt 文件的内容应使用 mytree 标记前缀。

秦汉唐

Published At
Categories with Web编程
Tagged with
comments powered by Disqus