110,533
社区成员
发帖
与我相关
我的任务
分享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 标记前缀。
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 标记前缀。
...全文
请发表友善的回复…
发表回复
gzy163991 2003-10-09
- 打赏
- 举报
To hywel():
你在html代码中把treeview的宽和高设一下就可以了，自动产生滚动条
<iewc:treeview id="ProductTree" runat="server" Width="268px" Height="148px"></iewc:treeview>
你在html代码中把treeview的宽和高设一下就可以了，自动产生滚动条
<iewc:treeview id="ProductTree" runat="server" Width="268px" Height="148px"></iewc:treeview>
isaacyh 2003-10-07
- 打赏
- 举报
请问有没有可以使treeview中选中的节点可以拖动到其他节点中，作为其他节点的子节点的例子？
cdyxh 2003-10-07
- 打赏
- 举报
關注
hywel 2003-10-07
- 打赏
- 举报
请问treeview怎么设置垂直滚动条啊？我的太长，但是它不会自动显示滚动条，真要命啊！5555555555555555555555~~~~~
gzy163991 2003-10-06
- 打赏
- 举报
自 江雨.net
gzy163991 2003-10-06
- 打赏
- 举报
转载
gzy163991 2003-10-06
- 打赏
- 举报
再贴一点，希望能给大家帮助
有朋友建议有必要进行TreeView的一个交流讨论，整理了一下，这篇帖子就算是做个引子，请大家继续补充
1.下载地址
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp
安装后，通过“自定义工具箱”->“.net框架组件”把TreeView添加到工具箱里
2.运行时无法显示
一般是TreeView的版本问题，最好下载英文版自动安装版本重新安装，安装前应该先到添加删除程序里卸掉原版本
3.显示格式出错（非树状显示）
TreeView要求客户端浏览器版本为IE5.5及以上，最好要求客户端升级为IE6.0
4.框架里使用TreeView
设置NavigateUrl、Target属性，可更新另外的Frame
5.找不到TreeNode类
使用TreeView，最好添加namespace：using Microsoft.Web.UI.WebControls;
6.遍历TreeView节点(递归算法)
private void Page_Load(object sender, System.EventArgs e)
{
GetAllNodeText(TreeView1.Nodes);
}
void GetAllNodeText(TreeNodeCollection tnc)
{
foreach(TreeNode node in tnc)
{
if(node.Nodes.Count!=0)
GetAllNodeText(node.Nodes);
Response.Write(node.Text + " ");
}
}
7.得到node结点的父节点
TreeNode pnode;
if(node.Parent is TreeNode)
pnode=(TreeNode)node.Parent;
else
//node is root node
8.修改TreeView样式（示例）
<iewc:TreeView id="TreeView1" runat="server" HoverStyle="color:blue;background:#00ffCC;"
DefaultStyle="background:red;color:yellow;" SelectedStyle="color:red;background:#00ff00;">
用代码：
TreeView1.DefaultStyle["font-size"] = "20pt";
9.TreeView展开无闪烁的解决方法
http://expert.csdn.net/Expert/topic/1300/1300576.xml
有朋友建议有必要进行TreeView的一个交流讨论，整理了一下，这篇帖子就算是做个引子，请大家继续补充
1.下载地址
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp
安装后，通过“自定义工具箱”->“.net框架组件”把TreeView添加到工具箱里
2.运行时无法显示
一般是TreeView的版本问题，最好下载英文版自动安装版本重新安装，安装前应该先到添加删除程序里卸掉原版本
3.显示格式出错（非树状显示）
TreeView要求客户端浏览器版本为IE5.5及以上，最好要求客户端升级为IE6.0
4.框架里使用TreeView
设置NavigateUrl、Target属性，可更新另外的Frame
5.找不到TreeNode类
使用TreeView，最好添加namespace：using Microsoft.Web.UI.WebControls;
6.遍历TreeView节点(递归算法)
private void Page_Load(object sender, System.EventArgs e)
{
GetAllNodeText(TreeView1.Nodes);
}
void GetAllNodeText(TreeNodeCollection tnc)
{
foreach(TreeNode node in tnc)
{
if(node.Nodes.Count!=0)
GetAllNodeText(node.Nodes);
Response.Write(node.Text + " ");
}
}
7.得到node结点的父节点
TreeNode pnode;
if(node.Parent is TreeNode)
pnode=(TreeNode)node.Parent;
else
//node is root node
8.修改TreeView样式（示例）
<iewc:TreeView id="TreeView1" runat="server" HoverStyle="color:blue;background:#00ffCC;"
DefaultStyle="background:red;color:yellow;" SelectedStyle="color:red;background:#00ff00;">
用代码：
TreeView1.DefaultStyle["font-size"] = "20pt";
9.TreeView展开无闪烁的解决方法
http://expert.csdn.net/Expert/topic/1300/1300576.xml
zhouxiaochenchina 2003-09-29
- 打赏
- 举报
我用C#开发WEB的，要再WEB里面实现一个TreeView还要动态和数据库绑定
如何实现，教教我大哥。。。。
如何实现，教教我大哥。。。。
sea2sea 2003-09-29
- 打赏
- 举报
也总结一下WinForm下的treeView吧，两者区别很大.
zhouxiaochenchina 2003-09-29
- 打赏
- 举报
好，我正好需要这个东东，我来试试，不管行不行，
先谢谢了
先谢谢了
