asp.net TreeView

转载 2006年06月07日 14:17:00

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

c#语言asp.net实现treeview控件

  从数据库里读数据就不写了吧?假设你得到了一个存放数据实体数组叫emps[],里面放的全是emp实体.                foreach (Emp item in emps)      ...

asp.net treeview控件无刷新选择和删除节点(使用jquery)

要想做到treeview在客户端的操作的话,首先要了解treeview生成的html,比如下面一个treeview 它的每一个节点生成的html都是一个table,比如说根节点     ...

ASP.NET树形控件TreeView的递归绑定

用递归绑定TreeView,数据库表设计的时候必不可少的2个字段分别是NodeId和ParentId,其中NodeId是用来标识节点本身的,ParentId是父节点的ID,如下图(记住第一个节点的No...

ASP.NET通过递归添加树(Treeview)

先来看看效果,基本上就是这样的。 所谓树,无非就是2点,第一个:根节点,第二:叶子节点,其中叶子节点中还可能有叶子节点,但是根节点始终只有一个。 下面贴上 各部分的代码 1.PAGE_LOA...

Asp.net TreeView异步加载数据,并结合checkbox实现多选删除

JS:         void PopulateNode(Object sender, TreeNodeEventArgs e)         {             Populat...

Treeview控件如何在asp.net ajax中使用小技巧

====================================================== 注:本文源代码点此下载 =============================...

黑马程序员之ASP.NET学习笔记:TREEVIEW中动态增加结点

在asp.net 2.0中,要动态从数据库中取出内容,动态增加结点,其实不难,比如以SQL SERVER 2000的PUBS数据库为例子,要以树型列表方式,取出作者,做为根结点,然后取出每位作者写过什...

TreeView连接数据库详解(ASP.NET)

数据库中建表(SQL Server) 表中填写数据 前台代码                     连接数据库         后台代码  public pa...

ASP.NET TreeView 递归绑定数据

187713732 asp.net 交流群,希望有更多的人可以加入,大家可以互相学习,帮助需要帮助的人,帮助刚入门的同行或即将入门的同行解决问题。DAL方法,BLL省略 public static L...

ASP.NET TreeView控件回传问题

TreeView控件默认不回传TreeNodeCheckChanged事件 需要加入一个javascript函数:  function postBackObject() {           ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:asp.net TreeView
举报原因:
原因补充:

(最多只允许输入30个字)