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/[email protected]=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 标记前缀。 |
![Centos 7 Apache配置虚拟主机[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)