ASP.NET TREEVIEW 使用方法

最新推荐文章于 2024-02-29 16:46:12 发布

weixin_30471065

最新推荐文章于 2024-02-29 16:46:12 发布

阅读量257

点赞数

文章标签： ui 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/wayne-ivan/archive/2009/03/26/1422300.html

版权

iewc TreeView 没有层次解决方法如下
1，根目录下需要有aspnet_client
2, 根目录下需要有webctrl_client
3，浏览器设置：安全-internet-自定义级别 - 二进制和脚本行为，允许

简介

　　在2002年，Microsoft发布了四种ASP .net Web控件，用于为使用 Microsoft Internet Explorer 的 Web 访问者提供更好的体验。这些 Web 控件称为 Internet Explorer Web 控件，也简称为 IE Web 控件，包括以下四种控件：
　　　MultiPage Web 控件

　　　TabStrip Web 控件

　　　Toolbar Web 控件

　　　TreeView Web 控件
　　这些 Web 控件通过提供 Web 访问者熟悉的用户界面，增强了 ASP.NET Web 页面。例如，Toolbar Web 控件可以显示一个与各种 Microsoft Office 产品中的工具栏相类似的可单击工具栏。TabStrip 和 MultiPage Web 控件配合使用后可以显示选项卡式内容。TreeView Web 控件可以用来显示可单击、可展开的树中的数据 - 与在 Microsoft Windows? 资源管理器中用树来显示 PC 文件系统中的驱动器和文件夹很类似。（您可以在 GotDotNet 站点找到这些 Web 控件的生动演示：WebControl Toolbar 演示、TabStrip/MultiPage WebControl 演示和 TreeView Sample WebControl 演示。）

　　IE Web 控件可以在安装了 .NET Framework 版本 1.0 或 1.1 的 Web 服务器上使用。尽管 IE Web 控件是设计用来与 Internet Explorer 配合使用的，但这些 Web 控件也可以显示在其他浏览器中。不过，在 Internet Explorer 以外的浏览器中，当用户与 IE Web 控件交互时（例如展开 TreeView Web 控件中的某个节点），会发生回传。在 Internet Explorer 5.5 或更高版本中，IE Web 控件会发送 DHTML 代码，从而避免了回传的发生。也就是说，在访问您的 Web 站点时，使用 Internet Explorer 5.5 或更高版本的访问者将会比使用其他浏览器的用户获得更好的用户体验；当然，没有使用 IE 5.5 或更高版本的用户仍可以看到 IE Web 控件，并可以与之进行交互。

　　下面，本文将主要介绍 TreeView IE Web 控件，并讨论如何使用此控件在 ASP.NET Web 页面中显示数据。有关其他 IE Web 控件的详细信息，请参阅 Internet Explorer Web Controls Overview 和 Internet Explorer Web Controls Reference。

　　安装IE Web控件

　　要在 ASP.NET Web 应用程序中使用 IE Web 控件，首先必须下载控件的源代码，然后运行一个编译批处理文件，对源代码进行编译并将所需的所有文件复制到相应的 Web 应用程序目录中。Internet Explorer Web 控件下载程序包是一个大小为 360 KB 的自解压安装文件。

　　下载并安装完 IE Web 控件后，将创建一个新目录（默认为 C:\Program Files\IE Web Controls\，您也可以在安装过程中配置此目录）。找到这个新目录，然后双击 build.bat 文件。这将创建一个新的子目录 build，编译 src 子目录中的类，并将生成的程序集和支持文件复制到 build 子目录中。

　　运行完 build.bat 文件后，build 子目录将包含程序集文件 Microsoft.Web.UI.WebControls.dll 和子目录 Runtime。要在 ASP.NET Web 应用程序中使用 IE Web 控件，必须将 build\Runtime 子目录中的内容复制到 Web 应用程序的 /webctrl_client/1_0 子目录中，并将程序集文件 (Microsoft.Web.UI.WebControls.dll) 复制到 Web 应用程序的 /bin 子目录中。（在 IE Web 控件的 README.txt 文件中，提供了示例以及执行这些任务的命令行指令。）

IE Web控件入门

　　如果使用的是 Microsoft Visual Studio? .net 来开发 ASP.NET Web 应用程序，则将 IE Web 控件添加到 ASP.NET Web 页是件轻松的事。首先，将 IE Web 控件包含在工具箱中。要完成这项操作，请右击 Toolbox（工具箱），然后选择 Customize Toolbox（自定义工具箱）选项。选择 .NET Framework Components（.NET Framework 组件）选项卡，然后单击 Browse（浏览）按钮。找到 Microsoft.Web.UI.WebControls.dll 程序集文件，然后单击 OK（确定）。这会将 MultiPage、TabStrip、Toolbar 和 TreeView 等 IE Web 控件添加到 Visual Studio .NET 工具箱中。要将以上控件中的任何一种添加到 ASP.NET Web 页中，只需要将相应的控件从工具箱拖放到设计器中即可。

　　要在内含代码的类中使用 IE Web 控件，首先需要右击 Reference（引用），然后选择 Add Reference（添加引用），将引用添加到 Microsoft.Web.UI.WebControls.dll 程序集中。然后，在内含代码的类中，如果使用的是 C# ，则添加 using Microsoft.Web.UI.WebControls；如果使用的是 Microsoft Visual Basic .NET，则添加 Imports Microsoft.Web.UI.WebControls。

　　如果不是使用 Visual Studio .NET 作为 ASP.NET Web 应用程序编辑器，则需要在 ASP.NET Web 页的顶端手动添加以下 @ReGISter 指令：

＜%@ Register TagPrefix="whatever"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls" %＞

　　然后，将IE Web控件添加到Web页中，可以使用以下语法：

＜whatever:WebControlName runat="server" ...＞
...
＜/whatever:WebControlName＞

　　例如，要添加 TreeView 控件，可以在页面顶端添加以下 @Register 指令：

＜%@ Register TagPrefix="iewc"
Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls" %＞

　　接着，在ASP.NET Web页中希望显示TreeView的位置添加以下Web控件语法：

＜iewc:TreeView runat="server" ...＞
...
＜/iewc:TreeView＞

TreeView IE Web 控件入门

　　当 TreeView IE Web 控件在访问者浏览器中显示时，会显示一棵树，此树与 Windows 资源管理器中的树非常类似。不同的是，TreeView 可以由任意多个 TreeNode 对象组成。每个 TreeNode 对象都可以关联文本和图像。另外，TreeNode 还可以显示为超链接并与某个 URL 相关联。每个 TreeNote 还可以包括任意多个子 TreeNote 对象。包含 TreeNode 及其子节点的层次结构构成了 TreeView 控件所呈现的树结构。

　　假设您要构建一个用于显示家谱的 TreeView 控件。由于信息基本上不需要改动，因此您可能希望静态地指定 TreeView 结构。如果使用的是 Visual Studio .net，则静态指定 TreeView 结构就像填写几份表格一样简单。首先，通过将 TreeView 控件从工具箱拖放到设计器中，将新的 TreeView 控件添加到 ASP.NET Web 页中。然后，将 TreeView 控件的 ID 属性设置为 tvFamilyTree。完成这两个步骤后，您的屏幕应该与图 1 类似。

图 1：简单的 TreeView

　　现在，要静态指定组成 TreeView 的 TreeNode。请从 Properties（属性）窗格中选择 Nodes（节点）属性，然后单击此属性右侧的省略号按钮。这时将显示 TreeNodeEditor（TreeNode 编辑器）对话框。现在可以将新的 TreeNode 添加到 TreeView 中。图 2 显示了输入家族树信息后的 TreeNodeEditor（TreeNote 编辑器）对话框。

图 2：TreeNodeEditor（TreeNote 编辑器）对话框

　　填充 TreeNodeEditor（TreeNote 编辑器）对话框后，以下标记将被添加到 ASP.NET Web 页的 .aspx 部分：

＜ie:TreeView id="tvFamilyTree" runat="server"＞
＜ie:TreeNode Text="John Smith"＞
＜ie:TreeNode Text="Born: Jan. 3rd, 1885"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Died: Feb. 13, 1919"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Spouse"＞
＜ie:TreeNode Text="Marie Ellsworth"＞
＜ie:TreeNode Text="Born: Aug. 1, 1889"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Died: Unknown"＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text="Children"＞
＜ie:TreeNode Text="John Smith, Jr."＞
＜ie:TreeNode Text="Born: July 4, 1891"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Died: Sept. 22, 1893"＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text="Mary Smith"＞
＜ie:TreeNode Text="Born: June 7, 1893"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Died: Aug. 13, 1949"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Spouse"＞
＜ie:TreeNode Text="Edward Joy"＞
＜ie:TreeNode Text="Born: Unknown"＞＜/ie:TreeNode＞
＜ie:TreeNode Text="Died: Aug. 13,
1949"＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text="Children"＞
＜ie:TreeNode Text="Michael Joy"＞
＜ie:TreeNode Text="Born: Oct. 8,
1918"＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜ie:TreeNode Text="Michele Joy"＞
＜ie:TreeNode Text="Born: May 21,
1920"＞＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeNode＞
＜/ie:TreeView＞

　　如果不是使用 Visual Studio .NET 作为编辑器，则需要将此内容手动添加到 ASP.NET Web 页。当通过浏览器查看 ASP.NET Web 页时，将显示一棵可展开的树，如图 3 所示。（图 3 显示了展开各个节点后的树。默认情况下，将仅显示根节点。您可以设置 TreeNote 的 Expanded 属性，以指示首次查看此页面时该 TreeNote 应为展开状态。）

图 3：展开的 TreeNote

　　除了文本标签以外，TreeNote 还可以关联图像。尤其值得说明的是，每个 TreeNote 可以关联三幅图像：当 TreeNote 处于标准（折叠）状态时显示一幅图像；当 TreeNote 处于展开状态时显示另一幅图像；当 TreeNote 处于选中状态（当用户单击 TreeNote 时，该节点变为选中状态）时显示第三幅图像。这三种属性都需要一个指向指定图像的 URL。

　　例如，可以通过以下方法展开家族树演示：将 TreeView 的 ImageUrl 属性设置为指向某个闭合的文件夹图像的 URL，将 TreeView 的 ExpandedImageUrl 属性设置为指向某个打开的文件夹图像的 URL，从而分别将折叠和已展开的 TreeNote 显示为闭合的文件夹和打开的文件夹。（如果要为选定的 TreeNote 换一幅图像，只需要将 TreeView 的 SelectedImageUrl 属性设置为相应的 URL 即可。）

　　请注意，TreeView 和 TreeNote 都具有 ImageUrl、ExpandedImageUrl 和 SelectedImageUrl 属性。不同的是，当设置 TreeView 的属性时，默认情况下，TreeView 中所有 TreeNote 都将显示指定的图像；如果设置 TreeNote 的属性，则这些属性仅适用于当前特定的 TreeNote。由于我们希望所有 TreeNote 处于折叠状态时显示为闭合的文件夹，处于展开状态时显示为打开的文件夹，因此我们对 TreeView 控件的 ImageUrl 和 ExpandedImageUrl 属性进行了设置。

　　设置完这些新属性后，图 3 的外观增色很多。在新的 TreeView 外观中，TreeNote 旁边都显示有图像，如图 4 所示。

图 4：带图像的 TreeNote

　　TreeNote 也可以关联 URL。当单击关联有 URL 的 TreeNote 时，会自动将用户快速链接到指定的 URL。TreeNote 的 NavigateUrl 属性用于指示当单击 TreeNote 时将用户链接到的 URL。该功能对于包含两个窗框的 ASP.NET Web 页非常有用。左侧窗框中包含一个 TreeView 控件。当用户单击某个 TreeNote 时，该节点的详细信息将显示在右侧窗框中，这与在 Windows 资源管理器中单击左侧窗格中的某个系统文件夹，该文件夹的文件将显示在右侧窗格中的情形类似。

　　要关联 URL，只需要将每个 TreeNote 的 NavigateUrl 设置为相应的 URL。要将 TreeNote 的关联 URL 加载到其他浏览器窗框中，请将 TreeNote 的 Target 属性设置为相应的窗框名称。这些步骤都可以通过 TreeNodeEditor（TreeNote 编辑器）来完成。要查看此类应用程序的示例，请参阅 Steve Sharrock 关于使用 TreeView 创建资源管理器风格的 ASP.NET Web 应用程序的文章：TreeView - Programming an Explorer-style Site View。

TreeView 的其他高级功能

　　虽然使用 Visual Studio .net 将静态 TreeNote 添加到 TreeView 的过程非常简单，但通常需要将内容动态地添加到 TreeView 中。例如，您将家族树信息存储到了数据库中，或是正在设计一个资源管理器风格的 Web 应用程序（在此应用程序中，用户可以浏览 Web 服务器的文件系统），这时您可能需要根据服务器的文件夹和文件来动态填充 TreeNote。

　　在内含代码的类中，可以通过编程方式将 TreeNote 添加到 TreeView 中。要将新的 TreeNote 添加到现有的 TreeNote 中，只需要使用 Nodes 属性的 Add() 方法。例如，以下 C# 代码将创建两个 TreeNote，并将第二个 TreeNote 添加为第一个 TreeNote 的子节点。然后，将第一个子节点添加到 TreeView 的根节点中。

// 创建第一个 TreeNote
TreeNode tvFirst = new TreeNode();
tvFirst.Text = "First Tree Node";

// 创建第二个 TreeNote
TreeNode tvSecond = new TreeNode();
tvSecond.Text = "Second Tree Node";

// 将第二个 TreeNote 添加为第一个 TreeNote 的子节点
tvFirst.Nodes.Add(tvSecond);

// 将第一个 TreeNote 添加到 TreeView 的根节点中。
tvFamilyTree.Nodes.Add(tvFirst);

　　遗憾的是，将数据库数据绑定到 TreeView 可不像将数据绑定到某个标准 ASP.NET Web 控件那么简单。因为 TreeView 本身用于显示分层数据，所以不太适合显示简单 SQL 查询的结果。因此，TreeView 不是用来显示简单 SQL 查询的内容的，而是用来显示 XML 文件的内容。所以，为了便于在 TreeView 中显示数据库信息，必须首先将其转换为 XML。

　　而且，虽然可以在 TreeView 控件中显示静态或动态 XML 文件，但是，TreeView 要求 XML 数据具有特定的格式。因此，要在 TreeView 中显示 XML 文件，必须提供 XSLT 样式表，以将 XML 从当前格式转换到 TreeView 要求的格式。有关如何完成此任务的详细信息，请参阅我的文章：Displaying XML Data in the Internet Explorer TreeView Control。

　　此外，TreeView 的 TreeNote 除了支持图像和超链接之外，其旁边还可以包含复选框。而且，当用户展开或折叠 TreeNote，选择 TreeNote，或者选中或取消选中带有复选框的 TreeNote 时，都会引发相应的事件。可以为这些事件创建事件处理程序，以自定义这些事件引发的相应操作。

　　小结

　　在本文中，我们简要地介绍了 IE Web 控件以及如何获得和安装这些控件，并详细讨论了如何使用 TreeView IE Web 控件。TreeView 控件的显示方式类似于标准的 Windows TreeView（可通过在 Windows 资源管理器中进行操作来体验）。TreeView 用来显示分层数据，可以由任意多个 TreeNote 组成，每个 TreeNote 又可以包含任何多个子 TreeNote。

　　可以用多种不同的方式自定义 TreeNote 的外观。例如，可以为处于折叠、展开和选中状态的 TreeNote 分别指定不同的图像。当单击 TreeNote 时，TreeNote 可以作为超链接将访问者重定向到其他 URL。TreeNote 还可以包含复选框。

　　使用 Visual Studio .NET 并借助 TreeNote 编辑器可以很容易地实现在 TreeView 中显示静态数据。通过 XML 文件或通过以编程方式添加 TreeNote，可以动态指定 TreeView 控件的内容。虽然本文介绍的仅是 TreeView 控件的皮毛，但对于您初步了解在 ASP.NET Web 应用程序中使用 TreeView 控件也是大有帮助的。

三、treeview属性和方法介绍

　　在窗体中添加一个treeview控件，通过treeview对象的属性nodes创建所需的树形结构。

　　例：建立如下树形结构

　　窗体中HTML代码为：

＜iewc:treeview id=”treeview1” autoselect=false shoplus=true showlines=true expandlevel=2 runat =server＞
＜iewc:treenode text=”科目” ＞
＜iewc:treenode text=”语文” /＞
＜iewc:treenode text=”数学” /＞
＜iewc:treenode text=”英语” /＞
＜/iewc:treenode＞
＜/iewc:treeview＞

　　1、autoselect=”false”：当访问者在treeview控件中对节点进行定位时，可以使用键盘上的箭头来进行定位。属性值为“false“，则不允许这样做。

　　2、Showplus=”true”：当两个节点收到一起的时候，你可以显示一个加号（+），访问者就知道这个节点可以展开，该属性值为“true“将使用加号，否则不使用。

　　3、Showlines=”true”：在一个treeview控件中的两个节点之间，可以显示一些线长，为”true”显示。

　　4、Expandlevel=2：用来定义treeview控件的层次结构展开的级别数。

　　5、navigateurl：点击节点时的跳转网址

　　如：

＜iewc:treeview id=”treeview2” runat =server＞
＜iewc:treenode text=”喜爱的站点” ＞
＜iewc:treenode text=”中国DOTNET俱乐部” navigateurl=”http://www.chinaaspx..com/” /＞
＜iewc:treenode text=”国家基础教育资源网” navigateurl=”htt://www.cbern.gov.cn” /＞
＜/iewc:treenode＞
＜/iewc:treeview＞

　　6、index：获取树节点在树节点集合中的位置

　　7、nodes：获取分配给树视图控件的树节点集合

　　8、parent：获取或设置控件的父容器

　　9、selectednode：获取或设置当前在树视图控件中选定的树节点

　　10、text：获取或设置在树节点标签中显示的文本

　　11、expand：展开树节点

　　12、clear：清空树

　　13、remove：移除当前树节点

　　14、checked：用以指明该树节点是否处于选中状态

　　四、简单示例

　　对左边树形结构进行选择，在右边表格中查询显示结果。

　　说明：

　　1、 SelectedIndexChange事件是对树结构进行选择时产生的,还有一个触发条件autopostback=true。

　　2、例中数据库由SQL 2000建立。

　　代码如下：

Imports System.Data
Imports System.Data.SqlClient
Public Class tree1
Inherits System.Web.UI.Page
Protected WithEvents Button1 As System.Web.UI.WebControls.Button
Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents Label2 As System.Web.UI.WebControls.Label

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
Dim strconnection As String = "server=zln\netsdk;uid=sa;pwd=sa;database=english"
Dim conn As New SqlConnection(strconnection)
conn.Open()
Dim sql As String = "select * from zlk where kemu='" & Session("node").ToString & "'"
Dim cmd As New SqlCommand(sql, conn)
Dim da As SqlDataReader
da = cmd.ExecuteReader
DataGrid1.DataSource = da
DataGrid1.DataBind()
End Sub

Private Sub TreeView1_SelectedIndexChange(ByVal sender As Object, ByVal e As Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs) Handles TreeView1.SelectedIndexChange
Dim ndsel As New Microsoft.Web.UI.WebControls.TreeNode()
ndsel = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex)
Session("node") = ndsel.Text
End Sub
End Class

asp.net TreeView安装、使用(如何将TreeView打包发布)(带CheckBox选择框的TreeView的初始化,TreeView客户端操作:选择父节点后自动选择所有子节点,子节点选择后自动选择父节点)(TreeView节点精确定位)

2.包括TreeView的asp.net程序的打包问题:
http://ttyp.cnblogs.com/archive/2005/06/01/165621.html
http://community.csdn.net/Expert/topic/4300/4300558.xml?temp=.7716028

在web.config加入以下节

< configSections >

< section name ="MicrosoftWebControls" type ="System.Configuration.NameValueSectionHandler, System, Version=1.0.5000.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />

</ configSections >

< MicrosoftWebControls >

< add key ="CommonFiles" value ="/web/treepath/" ></ add >

</ MicrosoftWebControls >

注意:configSections一定要放在第一个子节最前面.

剪切默认网站的webctrl_client目录到虚拟目录web/treepath/下,运行程序,树型界面出现了,只是前面的加减号出现问题,再右键查看WEB代码,发现SystemImagesPath属性还是指到webctrl_client目录下,看了SystemImagesPath的代码,把treeview控件的SystemImagesPath设置为空,再次运行程序,OK!全部通过,treeview的图片目录再也不需要依赖默认网站的图片目录了,打包也变的方便了

3.客户端操作TreeView带CheckBox的好例子（1）－－选择 /取消父节点后其所有子节点自动选择 /取消。不过里面有点小问题要注意:

(1)就是如何初始化已经选择的节点:注意要从客户端初始化的(把选择的节点放在客户端一个隐藏域里通过JS初始化).如果你在服务器端初始化了将无法在客户端修改它的状态.

(2)如何获得客户端设置的节点:在客户端改变了选择状态(node.setAtrribute("check","ture"))后,通过服务器端是无法获得选择的值的,也只能在客户端获得它(通过一个input type="hiiden" runat="server"来保存选择的值).
上面两个问题都是参考了下面的代码完成的.

两个客户端操作TreeView节点CheckBox的小例子 (转江雨.net)(自动选择子节点)
下面是修改后详细代码:

< script language ="javascript" >

//初始化选中节点

function initchecknode()

{

//获得需要初始化选择状态的节点的字符串.

var selectedNodes = document.all.checkedNodes.value;

var arrayNodes = new Array();

arrayNodes = selectedNodes.split(",");

var AllRootNode=new Array();

AllRootNode=document.getElementById("TreeView1").getChildren();

//初始化选择的节点

findAndCheckedNodes(AllRootNode,arrayNodes);

}

//根据已选择的节点的字符串初始化选择的节点

function findAndCheckedNodes(NodeArray,nodeDatas)

{

//alert(NodeArray.length);

if(parseInt(NodeArray.length)==0)

{

return;

}

else

{

for(var i=0;i<parseInt(NodeArray.length);i++)

{

var cNode,nodeData;

cNode=NodeArray[i];

////如果该节点在nodeDatas里则初始化checked = true;

nodeData = cNode.getAttribute("NodeData");

for(var j=0;j<nodeDatas.length;j++)

{

if(nodeDatas[j] == nodeData)

{

cNode.setAttribute("checked","true");

break;

}

//如果有子节点,则继续递归

if(parseInt(cNode.getChildren().length)!=0)

findAndCheckedNodes(cNode.getChildren(),nodeDatas);

}

//节点的oncheck事件

function tree_oncheck(tree)

{

var node=tree.getTreeNode(tree.clickedNodeIndex);

var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");

setcheck(node,Pchecked);

document.all.checkedNodes.value="";

document.all.unchecked.value="";

FindCheckedFromNode(TreeView1);

}

//设置子节点选中

function setcheck(node,Pc)

{

var i;

var ChildNode=new Array();

ChildNode=node.getChildren();

if(parseInt(ChildNode.length)==0)

return;

else

{

for(i=0;i<ChildNode.length;i++)

{

var cNode;

cNode=ChildNode[i];

if(parseInt(cNode.getChildren().length)!=0)

setcheck(cNode,Pc);

cNode.setAttribute("checked",Pc);

}

//获取所有节点状态

function FindCheckedFromNode(node)

{

var i = 0;

var nodes = new Array();

nodes = node.getChildren();

for (i = 0; i < nodes.length; i++)

{

var cNode;

cNode=nodes[i];

if (cNode.getAttribute("checked"))

AddChecked(cNode);

else

AddUnChecked(cNode);

if (parseInt(cNode.getChildren().length) != 0 )

{

FindCheckedFromNode(cNode);

}

//添加选中节点

function AddChecked(node)

{

document.all.checkedNodes.value += node.getAttribute("NodeData");

document.all.checkedNodes.value += ',';

}

//添加未选中节点

function AddUnChecked(node)

{

document.all.unchecked.value += node.getAttribute("NodeData");

document.all.unchecked.value += ',';

}

</ script >

< body MS_POSITIONING ="FlowLayout" onload ="initchecknode()" >

< form id ="Form1" method ="post" runat ="server" >

< FONT face ="宋体" >

< TABLE class ="main" id ="Table1" >

< TR >

< TD ></ TD >

< TD align ="center" height ="50" > 权限管理 </ TD >

< TD ></ TD >

</ TR >

< TR >

< TD ></ TD >

< TD > 用户名:

< asp:label id ="lblUserName" runat ="server" > Label </ asp:label ></ TD >

< TD ></ TD >

</ TR >

< TR >

< TD ></ TD >

< TD >< iewc:treeview id ="TreeView1" runat ="server" ExpandLevel ="1" SelectExpands ="True" SystemImagesPath ="/webctrl_client/1_0/treeimages/"

ImageUrl ="images/fclose.gif" SelectedImageUrl ="images/bookmark.gif" ExpandedImageUrl ="images/fopen.gif"

Target ="main" AutoSelect ="True" wilth ="100%" ></ iewc:treeview ></ TD >

< TD ></ TD >

</ TR >

< TR >

< TD ></ TD >

< TD align ="center" height ="50" >

< asp:button id ="BtnSure" runat ="server" Text ="保存" ></ asp:button >  

</ TD >

< TD ></ TD >

</ TR >

</ TABLE >

< INPUT id ="checkedNodes" type ="hidden" size ="32" runat ="server" NAME ="checkedNodes" >

< INPUT id ="unchecked" type ="hidden" size ="32" >

</ form >

</ body >

主要后台代码:

// 数据访问实例

protected ClassConn connE = new ClassConn();

private void Page_Load( object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

if ( !IsPostBack)

{

TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");

ViewState["UserId"] = Request.QueryString["id"]+string.Empty;

//初始化用户名

lblUserName.Text=connE.GetFieldValue("string","select name from EPM_EmployeeList where id = "+ViewState["UserId"].ToString());

ViewState["dsTree"] = connE.getDs("select * from EPM_DepartmentList where corpid="+Session["EnterpriseId"].ToString()+" and (type ="+Session["EnterpriseType"].ToString()+" or type=2) and state=1 order by ShowIndex");

connE.Close();

//初始化权限信息

InitData();

}

/**/ /// <summary>

/// 初始化权限树.

/// </summary>

/// <param name="nFatherid">父节点的ID</param>

/// <param name="node"></param>

protected void initTree( int nFatherid,TreeNode fatherNode)

{

DataSet ds = (DataSet)ViewState["dsTree"];

DataView dv = new DataView(ds.Tables[0]);

dv.RowFilter = "[parentDeptid] = "+nFatherid;

foreach ( DataRowView Row in dv )

{

TreeNode node = new TreeNode();

if (fatherNode == null)//根节点

{

node.Text=Row["name"].ToString();

node.NodeData = Row["id"].ToString();

node.CheckBox = true;

this.TreeView1.Nodes.Add(node);

//node.Expanded=false;//是否展开,若设置为true 则ExpandLevel="1" 无效

initTree(Int32.Parse(Row["id"].ToString()),node);//递归

}

else

{

node.Text = Row["name"].ToString();

node.NodeData = Row["id"].ToString();

//node.NavigateUrl = Row["url"].ToString();

node.CheckBox = true;

fatherNode.Nodes.Add(node);

initTree(Int32.Parse(Row["id"].ToString()),node);//递归

}

/**/ /// <summary>

/// 设置权限的字符串,没个权限间用逗号分隔.

/// </summary>

/// <returns></returns>

private string InitPowers()

{

string strPowers = string.Empty;

string strSql = "select id, DeptID from EPM_PowerList where EMPid ="+ViewState["UserId"].ToString();

SqlDataReader reader = connE.getDreader(strSql);

while(reader.Read())

{

if (strPowers.Length == 0)

{

strPowers = reader[1].ToString();

}

else

{

strPowers += ","+reader[1].ToString();

}

reader.Close();

return strPowers;

}

/**/ /// <summary>

/// 初始化权限树

/// </summary>

private void InitData()

{

//获得权限字符串

string strPowers = InitPowers();

//把权限字符串赋给checkedNodes.

this.checkedNodes.Value = strPowers;

//初始化菜单树,使用递归调用.

this.TreeView1.Nodes.Clear();

initTree(0,(TreeNode)null);

}

/**/ /// <summary>

/// 保存权限的设置

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void BtnSure_Click( object sender, System.EventArgs e)

{

//先删除原来权限的设置

string strSql = "delete from EPM_PowerList where empid="+ViewState["UserId"].ToString();

connE.runSqlOnly(strSql);

//重新设置权限

SaveTree();

connE.Alert("保存成功!",Page);

//重新在服务器端初始权限信息

InitData();

}

/**/ /// <summary>

/// 保存树中已选择的节点

/// </summary>

protected void SaveTree()

{

//获得所有已经选择的接点

string strSelected = string.Empty;

strSelected = this.checkedNodes.Value;

if(strSelected != string.Empty)

{

strSelected = strSelected.Substring(0,strSelected.Length-1);

string [] strSelecteds = strSelected.Split(',');

foreach(string str in strSelecteds)

{

string strSql = "insert EPM_PowerList (EMPid,deptid) values ('"+ViewState["UserId"].ToString()+"','"+str+"')";

connE.runSqlOnly(strSql);

}

3.客户端操作TreeView带CheckBox的好例子（2）－－选择子节点后自动选择父节点；取消子节点后根据情况的递归取消父节点。
把上面的tree_oncheck()修改一下，然后增加两个方法setParent()和checkBrother(),代码如下：

// 节点的oncheck事件

function tree_oncheck(tree)

{

var node=tree.getTreeNode(tree.clickedNodeIndex);

var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");

setcheck(node,Pchecked);

setParent(node,Pchecked);//如果是选择那么选择其父接点.

document.all.checkedNodes.value="";

document.all.unchecked.value="";

FindCheckedFromNode(TreeView1);

}

// 设置子节点选中/取消;

// 同时需要设置父节点的状态(如果是取消选中的话,仅仅设置本节点及其所有字接点,不涉及父接点)

function setParent(node,Pc)

{

var parentNode = node.getParent();

if(parentNode)

{

var parentNodeFather = parentNode.getParent();

if(parentNodeFather)

{

setParent(parentNode,Pc);

}

if(Pc)

{parentNode.setAttribute("checked",Pc);}

else

{

checkBrother(parentNode,Pc,node.getAttribute("NodeData"))

}

// 检查子接点是否有选择的,如果有一个选择了,那返回true

// 只查第一级节点.

function checkBrother(parentNode,Pc,nodeData)

{

var childNodes = new Array();

childNodes = parentNode.getChildren();

if(childNodes.length >0)

{

var bChecked = true;

for(var i=0;i<childNodes.length;i++)

{

if(childNodes[i].getAttribute("checked") == true && childNodes[i].getAttribute("NodeData") != nodeData)

{

//alert(i+childNodes[i].getAttribute("Text"));

bChecked = false;

break;

}

if(bChecked)

{

parentNode.setAttribute("checked",Pc);

}

else

{

//所有父结点选择

setParent(parentNode,!Pc)

}

else

{

parentNode.setAttribute("checked",Pc);

}

4.TreeView节点的精确定位问题（通过NodeData来定位）

// Page_Load事件里根据NodeData来展开到到定位的节点

// 这里是修改别人的(作者是根据Node的Text定位的.

FindInTree2(Request.QueryString[ " selectedNodeData " ].ToString());

// 根据NodeDate寻找节点

private void FindInTree2( string strNodeData)

{

foreach (TreeNode tn in TreeView1.Nodes)

{

if (tn.NodeData != strNodeData)

{

FindInTree2(tn,strNodeData);

}

else

{

ExpandTree2(tn);

return;

}

// 根据NodeDate寻找节点

private void FindInTree2(TreeNode objTreeNode, string strNodeData)

{

foreach (TreeNode tn in objTreeNode.Nodes)

{

if (tn.NodeData != strNodeData)

{

FindInTree2(tn,strNodeData);

}

else

{

ExpandTree2(tn);

return;

}

// 根据NodeDate展开节点

private void ExpandTree2(TreeNode objTreeNode)

{

string strIndex = "0";

objTreeNode.Expanded = true;

strIndex = objTreeNode.GetNodeIndex();

while (objTreeNode.Parent is TreeNode)

{

objTreeNode = ((TreeNode)objTreeNode.Parent);

objTreeNode.Expanded = true;

}

TreeView1.SelectedNodeIndex = strIndex;

}

5.asp.net 2.0里TreeView已经集成了,不需要单独安装了,但现在偶觉得,他只是换汤不换药,特别是在节点定位,和客户端操作上这两个关键问题上没啥改进.(偶没用过只是看了它的介绍.)

ASP.NET 2.0 的TreeView 控件介绍(转载)

TreeView客户端操作在这里啊~~~~~~~~~~~~
http://msdn.microsoft.com/library/default.asp?url=/workshop/webcontrols/behaviors/library/TreeView/TreeView.asp

http://www.microsoft.com/china/msdn/archives/library/workshop/webcontrols/overview/treeview.asp

1.下面的为转载:

1.下载地址
http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp
下载后是后缀为bat的版本
(1)bulid.将bulid.bat的路径指向csc.exe所在路径,生成Microsoft.Web.UI.WebControls.dll。
(2)在wwwroot下创建空目录webctrl_client\1_0。
(3)将build\Runtime下的文件拷至webctrl_client\1_0下。
(4)选择工具箱的自定义工具箱，添加Microsoft.Web.UI.WebControls.dll。
有些麻烦
但如果你能找到后缀是msi的自动安装版本，直接下一步就行（我一直用这个版本，hoho）
安装后，通过“自定义工具箱”->“.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.展开时不提交，改变选择节点时才提交
将autopostback设置成false;
在body里添加 <body οnlοad="initTree()">
然后在PageLoad里写：
string strTreeName = "TreeView1";
string strRef = Page.GetPostBackEventReference(TreeView1);
string strScript = "<script language=\"JavaScript\"> \n" + " \n" + "</script>";
Page.RegisterClientScriptBlock("InitTree",strScript );

这样就只有你点击的节点更改的时候才提交！

10.TreeView结合XML
把XML文件设置为如下格式，然后直接设置TreeNodeSrc为该XML文件就行
<?xml version="1.0" encoding="GB2312"?>
<TREENODES>
<TREENODE TEXT="node0" EXPANDED="true">
<TREENODE TEXT="node1"/>
<TREENODE TEXT="node2"/>
</TREENODE>
<TREENODE TEXT="node3" NavigateURL="3.aspx"/>
</TREENODES>
或者用代码
TreeView1.TreeNodesrc="a.xml";
TreeView1.DataBind();

11.请问，在页面加载时，如何选中Treeview某一节点?

index属性，是一个如1.1.0的东西，解析这个字符串，然后定位

private void ExpandNode(string selID)//selID like 1.1.0
{
char[] mySplit = new char[]{'.'};
string [] nodeArray = selID.Split(mySplit);

TreeNode myNode = null;
for(int i=0;i<nodeArray.Length;i++)
{
  if(i==0)
   myNode = tree.Nodes[Convert.ToInt32(nodeArray[i])];
  else
   myNode = myNode.Nodes[Convert.ToInt32(nodeArray[i])];

  myNode.Expanded = true;
  tree.SelectedNodeIndex = myNode.GetNodeIndex();
}
}

客户端控制TreeView
http://expert.csdn.net/Expert/topic/1382/1382892.xml

1.设置所选节点，如选中第二个节点
function SetSelNode()
{
TreeView1.selectedNodeIndex="1";
}

2.得到所选节点的Text，ID或NodeData
function GetAttribute()
{
alert(TreeView1.getTreeNode(TreeView1.selectedNodeIndex).getAttribute("Text"));
}
替换Text为ID或NodeData，可分别得到所选节点的ID或NodeData

3.修改节点属性，如修改第一个节点的Text
function ModifyNode()
{
var node=TreeView1.getTreeNode("0");
node.setAttribute("Text","hgknight");
}

4.得到点击节点
function TreeView1.onclick()
{
alert(TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("Text"));
}

5.添加节点
function AddNode()
{
var node=TreeView1.createTreeNode();
node.setAttribute("Text","hgknight");
TreeView1.add(node);
}

6.js遍历所有节点
var AllRootNode=new Array();
AllRootNode=TreeView1.getChildren();
AlertNode(AllRootNode);

--------------------------------------------------------------------------------------------------------------------------------------------------------

<iewc:treeview id="TreeView1" runat="server" wilth="100%" AutoSelect="True" BorderWidth="2px" Target="main"
ExpandedImageUrl="images/fopen.gif" SelectedImageUrl="images/bookmark.gif" ImageUrl="images/fclose.gif"
BorderColor="AliceBlue" BackColor="#ffffcc" SystemImagesPath="../webctrl_client/1_0/treeimages/"
SelectExpands="True" ExpandLevel="1"></iewc:treeview>
-----------------

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
namespace aspnetc.admin
{
/// <summary>
/// left 的摘要说明。
/// </summary>
public class left : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label lblName;
protected Microsoft.Web.UI.WebControls.TreeView TreeView1;
protected System.Web.UI.WebControls.HyperLink hlkLogOut;
protected System.Web.UI.WebControls.Label Label2;

ClassConn connE = new ClassConn();

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if (!IsPostBack)
{
lblName.Text=Session["userName"]!=null ? Session["userName"].ToString():string.Empty;
try
{
//添加命令，从数据库中得到数据
SqlDataAdapter ada = new SqlDataAdapter("select * from menues where state=1 order by sortIndex",connE.GetConn());
DataSet ds=new DataSet();
ada.Fill(ds);
this.ViewState["ds"]=ds;
}
catch (Exception ex)
{
throw (ex);
}
finally
{
connE.Close();
}
//调用递归函数，完成树形结构的生成
AddTree(0, (TreeNode)null);
}
}

#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

/// <summary>
/// 递归添加树的节点
/// </summary>
/// <param name="ParentID"></param>
/// <param name="pNode"></param>
public void AddTree(int ParentID,TreeNode pNode)
{
DataSet ds=(DataSet) this.ViewState["ds"];
DataView dvTree = new DataView(ds.Tables[0]);
//过滤ParentID,得到当前的所有子节点
dvTree.RowFilter = "[parentId] = " + ParentID;

foreach(DataRowView Row in dvTree)
{
TreeNode Node=new TreeNode() ;
if(pNode == null)
{ //添加根节点
Node.Text = Row["name"].ToString();
TreeView1.Nodes.Add(Node);
//Node.Expanded=false;//是否展开若设置为true 则ExpandLevel="1"无效
AddTree(Int32.Parse(Row["ID"].ToString()), Node); //再次递归
}
else
{

if(4>3)
{
//添加当前节点的子节点
Node.Text = Row["name"].ToString();
//Node.Target = mainFrame;
Node.NavigateUrl = Row["url"].ToString();
pNode.Nodes.Add(Node);
//Node.Expanded = false;
AddTree(Int32.Parse(Row["ID"].ToString()),Node);     //再次递归
}
}
}
}

}
}
----------------------------------------------------------------------------------------------------------------------------------------

http://www.microsoft.com/china/MSDN/library/archives/library/DNAspp/html/aspnet-usingtreeviewieWebcontrol.asp

IEWebControl TreeView右键菜单实例 选择自 hgknight 的 Blog

一个IEWebControl TreeView右键菜单的例子，实现了添加、修改和删除功能，复制即可运行
更多TreeView的客户端操作参见
http://www.csdn.net/Develop/read_article.asp?id=22100

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<HTML>
<HEAD>
  <title>TreeView控件右键菜单</title>
  <style>
  
  </style>
</HEAD>
<body οnclick="hideMenu()">
  <form id="TreeView" method="post" runat="server">
   <iewc:TreeView id="TreeView1" runat="server" ExpandLevel="3" HoverStyle="color:blue;background:#ffff00;">
    <iewc:TreeNode Text="Node0" Expanded="True">
     <iewc:TreeNode Text="Node3">
      <iewc:TreeNode Text="Node5"></iewc:TreeNode>
      <iewc:TreeNode Text="Node6"></iewc:TreeNode>
     </iewc:TreeNode>
     <iewc:TreeNode Text="Node4"></iewc:TreeNode>
    </iewc:TreeNode>
    <iewc:TreeNode Text="Node1" Expanded="True">
     <iewc:TreeNode Text="Node7">
      <iewc:TreeNode Text="Node8"></iewc:TreeNode>
     </iewc:TreeNode>
    </iewc:TreeNode>
    <iewc:TreeNode Text="Node2" Expanded="True">
     <iewc:TreeNode Text="Node9"></iewc:TreeNode>
     <iewc:TreeNode Text="Node10">
      <iewc:TreeNode Text="Node11"></iewc:TreeNode>
      <iewc:TreeNode Text="Node12"></iewc:TreeNode>
     </iewc:TreeNode>
    </iewc:TreeNode>
   </iewc:TreeView>
   <div id="popupMenu" class="skin" onMouseover="highlighItem()" onMouseout="lowlightItem()" onClick="clickItem()">
    <div class="menuitems" func="add">添加</div>
    <hr>
    <div class="menuitems" func="delete">删除</div>
    <div class="menuitems" func="modify">修改</div>
   </div>
  </form>
  <script language="javascript">
   var menuskin = "skin";
   var node = null;

   function hideMenu()
   {
    popupMenu.style.visibility = "hidden";
   }

   function highlighItem()
   {
    if (event.srcElement.className == "menuitems")
    {
     event.srcElement.style.backgroundColor = "highlight";
     event.srcElement.style.color = "white";
    }
   }

   function lowlightItem()
   {
    if (event.srcElement.className == "menuitems")
    {
     event.srcElement.style.backgroundColor = "";
     event.srcElement.style.color = "black";
     window.status = "";
    }
   }

  private void SetAllNodeData(TreeNodeCollection tnc)
  {

   foreach(TreeNode node in tnc)
   {
    if(node.Nodes.Count!=0)
    {
     SetAllNodeData(node.Nodes);
    }
    if (node.Checked)
    {
     node.Checked = false;
    }
    else
    {
     node.Checked = true;
    }

   }
  }

Microsfot.Web.UI.WebControls.TreeView JavaScript控制方法研究
http://caidaoli.cnblogs.com/archive/2005/02/23/108317.html?Pending=true#Post

被选择的节点的索引：
tree.selectedNodeIndex
被单击的节点的索引：
tree.clickedNodeIndex
获取一个节点：
tree.getTreeNode(nodeIndex)
在根节点下增加一个子节点：
var tree = document.all['TreeView1'];
var node = tree.createTreeNode() ;
tree.add(node);
node.setAttribute( "text", "aaaa");
在当前节点下增加一个子节点：
var tree = document.all['TreeView1'];
var node = tree.createTreeNode() ;
var parentNode = tree.getTreeNode( tree.clickedNodeIndex);
parentNode.add(node);
node.setAttribute( "text", "aaaa");
通过XML文件来增加子节点：
node.setAttribute("NavigateUrl","xxx");
node.databind();
动态增加子节点后自动展开：
node.setAttribute('expanded', 'true');//MS提供的HTC中需要修改一个地方，否则就会产生一个异常
获取节点的属性：
node.getAttribute("xxx")
设置节点的属性：
node.setAttribute('xxx', 'xxxx');

常用属性列表：

属性	值	含义
CheckBox	True False	是否有选择框
checked	True False	选择框是否被选中
Expanded	True False	是否展开
ImageURL		正常状态下左边的图标
SelectedImageUrl		当节点被选择时左边的图标
ExpandedImageUrl		当节点被展开后左边的图标
Target		目标框架
navigateurl		目标URL
type		节点的类型
childtype		子节点的类型
Text		节点显示的文本
innerText
innerHTML
defaultstyle		默认的风格
hoverstyle		当鼠标移到节点的上面时的风格
selectedstyle		当节点被选择时的风格
treenodesrc

获取父节点：
node.getParent()
获取子节点：
node.getChildren()
判断节点是否有子节点
node.getChildren().length > 0
响应onselectedindexchange事件：
var tree = document.all["tvMain"];
tree.attachEvent("onselectedindexchange", SelectedIndexChange);

转载于:https://www.cnblogs.com/wayne-ivan/archive/2009/03/26/1422300.html

weixin_30471065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET TREEVIEW 使用方法

iewc TreeView 没有层次解决方法如下1，根目录下需要有aspnet_client 2, 根目录下需要有webctrl_client 3，浏览器设置：安全-internet-自定义级别 - 二进制和脚本行为，允许简介　　在2002年，Microsoft发布了四种ASP.netWeb控件，用于为使用 Microsoft Internet Explorer ...
复制链接

扫一扫