惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
V2EX
C
Check Point Blog
博客园_首页
B
Blog
D
Docker
U
Unit 42
量子位
I
InfoQ
有赞技术团队
有赞技术团队
Martin Fowler
Martin Fowler
GbyAI
GbyAI
L
LangChain Blog
云风的 BLOG
云风的 BLOG
博客园 - Franky
美团技术团队
T
The Blog of Author Tim Ferriss
阮一峰的网络日志
阮一峰的网络日志
月光博客
月光博客
Vercel News
Vercel News
Recent Announcements
Recent Announcements
雷峰网
雷峰网
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
Google DeepMind News
Google DeepMind News

博客园 - 狂闪工作室

Subject类 Questions类 Products类 Members类 Member类 Info类 Images类 Category类 Dlh21数据库备份 文章集萃 网站方案 网址收集 仿照csdn左面的菜单的ASP+数据库无限级树菜单代码分享 树型论坛的快速算法 [原创]用ASP.NETN层结构封装的数据层访问基类 如何在DataGrid前加一个列让其id按顺序排列,而非绑定的id字段的乱七八糟的排序??? 如何把两个并列文本框整合到一个下拉框中? 图片上传自动生成缩略图VB组件!
TreeView小结
狂闪工作室 · 2005-03-12 · via 博客园 - 狂闪工作室

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 标记前缀。