ASP.NET中树形图的实现

asp.net

树形图用于显示按照树形结构进行组织的数据,其用途比较广泛,如计算机中的文件系统(Windows中的资源管理器)、企业或公司的组成结构等。我们知道在Windows下VB、PB、Delphi等工具提供了一个功能很强的树型控件TreeView,利用Treeview控件可以方便地开发树形图。然而在网页上实现树形图就不那么容易了,现在在ASP.NET中利用微软提供的Internet Explorer WebControls它使得网页上的树形图开发与在Windows下一样的方便,一样的功能强大,甚至更灵活。

本文介绍用Internet Explorer WebControls开发树形图的方法,由于树形图结构较复杂,使用起来常不知如何下手。笔者结合最近刚为公司用ASP.NET编写的应用程序管理器这一具体实例,详细阐述在ASP.NET下如何将Internet Explorer WebControls的使用与数据库联系起来,实现数据分任意多层显示,方便地进行增加、修改、删除、移动操作。笔者希望通过对该实例的阐述,达到抛砖引玉的效果,与各位同仁相互交流,共同进步。

Internet Explorer WebControls不在VS.NET的标准Server Control中,要到微软的站点上下载,下载地址是:

http://msdn.microsoft.com/downloads/samples/internet/default.asp?url=/Downloads/samples/Internet/ASP_DOT_NET_ServerControls/WebControls/default.asp

下载安装后第一次使用时,要右击工具箱Customize Toolbox…→.NET Framework Components中找到Micosoft.Web.UI.WebControls.Treeview后选中,这样Treeview控件就出现在工具箱中了。

一、树的建立

具体方法是:创建一个数据库,设计树图信息表TREE_INFO,包含NODEID、PARENTID、NODENAME、ADDERSS、ICON字段,其它字段根据实际业务而定,节点名称NODENAME将在树型控件的节点上显示,NODEID字段保存节点的唯一标识号,PARENTID表示当前节点的父节点号,标识号组成了一个“链表”,记录了树上节点的结构。设计一个Web窗体其上放置TreeView控件。

Private Sub CreateDataSet()’建立数据集

Dim myConn As New SqlConnection()

Dim myCmd As New SqlCommand("select NODEID,NODENAME,PARENTID,ADDRESS,ICON from Tree_info", myConn)

Dim myDataAdapter As New SqlDataAdapter()

myConn.ConnectionString = Application("connectstring")

myCmd.CommandText = ""

myCmd.Connection = myConn

myDataAdapter.SelectCommand = myCmd

myDataAdapter.Fill(ds, "tree")

End Sub

建树的基本思路是:从根节点开始递归调用显示子树

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

CreateDataSet()

intiTree(TreeView1.Nodes, 0)

End Sub

Private Sub intiTree(ByRef Nds As TreeNodeCollection, ByVal parentId As Integer)

Dim dv As New DataView()

Dim drv As DataRowView

Dim tmpNd As TreeNode

Dim intId As Integer

dv.Table = ds.Tables("tree")

dv.RowFilter = "PARENTID=’" & parentId & "’"

For Each drv In dv

tmpNd = New TreeNode()

strId = drv("NODE_ID")

tmpNd.ID = strId

tmpNd.Text = drv("NODE_NAME ")

tmpNd.ImageUrl = drv("ICON").ToString

Nds.Add(tmpNd)

intiTree(Nds(Nds.Count - 1).Nodes, intId)

Next

End Sub

二、增加、删除树节点

单纯在Treeview 上增加、删除、修改节点只需用Nodes属性的Add、 Remove、等方法即可,值得注意的地方是VS.NET中Treeview的Nodes集合与VS6.0中的区别,VS6.0中的是一个大的集合,而VS.NET中的是分层的每个Node下都有Nodes属性。增加、删除、修改树节点时与VS6.0相比有很大差别,特别是删除时。

Private Sub ButAdd_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ButAdd.Click’在选定的节点下添加子节点

Dim tmpNd As New TreeNode(), NdSel As TreeNode

tmpNd.ID = GetNewId()

NdSel = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex)’选中的节点

tmpNd.Text = "新节点"

NdSel.Nodes.Add(tmpNd)

Dim myRow As DataRow

myRow = ds.Tables("tree").NewRow()

myRow("NODE_NAME") = tmpNd.ID

myRow("NODE_DESCRIPT") = "新节点" & tmpNd.ID & "_" & NdSel.ID

myRow("PARENT_NAME") = NdSel.ID

ds.Tables("tree").Rows.Add(myRow)

End Sub

Private Sub ButDele_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButDele.Click’删除选中的节点

Dim idx As String = TreeView1.SelectedNodeIndex()

GetNdCol(idx).Remove(TreeView1.GetNodeFromIndex(idx))

Dim dv As New DataView(), recNo As Integer

dv.Table = ds.Tables("tree")

dv.RowFilter= "NODEID=" & NdId

dv.Delete(0)

End Sub

Private Function GetNdCol(ByVal idx As String) As TreeNodeCollection

‘获得选中节点的父节点的Nodes集合

Dim cnt As Integer, i As Integer

Dim tmpNds As TreeNodeCollection

Dim idxs() As String

idxs = Split(idx, ".")

cnt = UBound(idxs)

If cnt = 0 Then

tmpNds = TreeView1.Nodes

Else

tmpNds = TreeView1.Nodes(CInt(idxs(0))).Nodes

For i = 1 To cnt - 1

tmpNds = tmpNds(CInt(idxs(i))).Nodes

Next

End If

Return tmpNds

End Function

三、修改、移动树节点

由于服务器控件不支持鼠标拖动事件,所以不能象Windows程序那样通过拖动移动节点,这里是通过选择父节点的方式。移动是通过在原位置删除,新位置添加实现的,要注意在删除时先保存节点信息。

Private Sub TreeView1_SelectedIndexChange(ByVal sender As Object, ByVal e As Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs) Handles TreeView1.SelectedIndexChange

Dim dv As New DataView()

dv.Table = ds.Tables("tree")

Dim tmpNd As TreeNode = TreeNdSel(e.OldNode), tmpNds As TreeNodeCollection

dv.RowFilter= "NODEID=" & tmpNd.ID

dv(0)("NODE_DESCRIPT") = Me.TextBox1.Text

dv(0)("ADDRESS") = Me.TextBox2.Text

dv(0)("TARGET") = Me.TextBox3.Text

dv(0)("ICON") = Me.TextBox4.Text

If dv(0)("PARENTID").ToString <> Me.DropDownList1.SelectedItem.Value Then

‘移动节点

dv(0)("PARENT_NAME") = Me.DropDownList1.SelectedItem.Value

If Me.DropDownList1.SelectedItem.Value = "ROOT" Then

tmpNds = TreeView1.Nodes

Else

tmpNds = FromIdToNode(Me.DropDownList1.SelectedItem.Value, TreeView1.Nodes).Nodes’新的父节点的Nodes集合

End If

GetNdCol(e.OldNode).Remove(tmpNd)

tmpNds.Add(tmpNd)

End If

tmpNd.Text = Me.TextBox1.Text

tmpNd.ImageUrl = Me.TextBox4.Text

tmpNd = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex)

dv.RowFilter= "NODEID=" & tmpNd.ID

Me.TextBox1.Text = dv(0)("NODENAME").ToString

Me.TextBox2.Text = dv(0)("ADDRESS").ToString

Me.TextBox3.Text = dv(0)("TARGET").ToString

Me.TextBox4.Text = dv(0)("ICON").ToString

End Sub

Private Function FromIdToNode(ByVal ID As String, ByVal Nds As TreeNodeCollection) As TreeNode

‘由关键字查找节点

Dim i As Integer

Dim tmpNd As TreeNode, tmpNd1 As TreeNode

For Each tmpNd In Nds

If tmpNd.ID = ID Then

Return tmpNd

Exit Function

End If

tmpNd1 = FromIdToNode(ID, tmpNd.Nodes)

If Not (tmpNd1 Is Nothing) Then

Return tmpNd1

Exit Function

End If

Next

Return Nothing

End Function

四、结束语

以上阐述ASP.NET中树状显示的基本方法,以及如何在对树节点进行维护(增加、删除、修改、移动)的同时,修改数据库数据。由于篇幅所限,笔者在此只对基本思路和流程及关键步骤作了介绍,并未列出详细源代码,读者可自行完善。需要详细源代码者可与我联系,本文程序在VS.NET、SQLServer、Windows 2000、IIS5.0下调试通过。

时间: 2024-08-30 10:52:02

ASP.NET中树形图的实现的相关文章

ASP.NET中的状态管理

asp.net 我们在ASP中能够通过cookie.查询字符串.应用程序.对话等轻易地解决这些问题.现在到了ASP.NET环境中,我们仍然可以使用这些功能,只是它们的种类更多了,功能也更强大了. 管理互联网网页主要有二种不同的方法:客户端和服务器端. 1.客户端的状态管理: 在客户端.服务器之间的多次请求-应答期间,服务器上不保存信息,信息将被存储在网页或用户的计算机上. A.Cookie cookie是存储在客户端文件系统的文本文件中或客户端浏览器对话的内存中的少量数据,它主要用来跟踪数据设置

数据-新手求解asp.net:asp.net中如何根据自己的需要动态的生成表格并能输入保存

问题描述 新手求解asp.net:asp.net中如何根据自己的需要动态的生成表格并能输入保存 新手求解asp.net:asp.net中如何根据自己的需要输入行列数动态的生成表格行和列,并且在网页中生成的表格能够对数据的输入并保存到后台数据库中,如果表格不能实现输入的话用文本框形式又如何解决?如何动态生成文本框并保存到数据库表格中,急啊,谢谢大神指点,好人一生平安0.0! 解决方案 asp.net 动态表格生成1.ASP.NET动态生成HTML页面Asp.net利用Jquery动态添加表格的行数

在ASP.NET中使用计时器(Timer)

我在实验中发现在 ASP.NET 中可以使用计时器(Timer)完成一些定时动作.这一点可能会对我们的一些 Web 程序有益. 下面首先介绍我测试使用的一个例子: 首先在 global.asax 中的 Application_OnStart 事件过程中定义计时器,代码如下: [VB.NET] global.asax <%@ import Namespace="System.Timers" %> <script runat="server">

asp.net中ajax技术是否可以实现停止服务器端正在运行的按钮事件

问题描述 asp.net中ajax技术是否可以实现停止服务器端正在运行的按钮事件 给予B/S的webform项目 在服务器端有一个按钮事件 执行时间较长 所以就添加了一个按钮用来可以随时停止正在运行的耗时较长的按钮 问题是那个正在服务器端运行的按钮是否可以被其他按钮终止呢?求解答 解决方案 不可以.首先将长时间操作的任务放在按钮事件中就是错误的.按钮事件在页面回传前调用,ajax回发根本在页面加载后.你应该用消息队列.后台服务去执行长时间的任务. 解决方案二: 这个理论上是可以实现的. 服务器端

Asp.Net中使用Highcharts控件X轴的categories数据一多会被截断

问题描述 Asp.Net中使用Highcharts控件X轴的categories数据一多会被截断 xAxis: { tickmarkPlacement: ""on"" type: 'datetime' tickInterval: [<%=num %>] categories: [<%=lastModifyTime %>] } xAxis中 categories数据会被截断的问题怎么解决 解决方案 ASP.NET中通过WebService获取数

asp.net中td中的两个控件左右并排好了,但是如何上下居中,怎么弄都不得,大神帮看看

问题描述 asp.net中td中的两个控件左右并排好了,但是如何上下居中,怎么弄都不得,大神帮看看 /asp:TextBox 如何让这个TextBox控件和ImageButton控件都是并排的上下居中吖,我用了valign="middle" 还是不得,各位大神,帮帮我吧,我弄了一个早上了,明天要交作业了 解决方案 td不够宽导致另外控件换行了吧,td宽度设置大一点能容下2个按钮 解决方案二: 长度是足够长的,会不会是我的TextBox小了?因为我的图片比那个TextBox大,可以再帮我

在 ASP.NET 中执行 URL 重写

asp.net|执行 Scott Mitchell 4GuysFromRolla.com 适用范围: Microsoft ASP.NET 摘要:介绍如何使用 Microsoft ASP.NET 执行动态 URL 重写.URL 重写是截取传入 Web 请求并自动将请求重定向到其他 URL 的过程.讨论实现 URL 重写的各种技术,并介绍执行 URL 重写的一些实际情况. 下载本文的源代码. 本页内容 引言 URL 重写的常见用法 请求到达 IIS 时将会发生什么情况 实现 URL 重写 构建 UR

ASP.NET中几种加密方法

MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由Mit Laboratory for Computer Science和Rsa data security inc的Ronald l. rivest开发出来,经md2.md3和md4发展而来.它的作用是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是md2.md4还是md5,它们都需要获得一个随机长度的信息并产

ASP.NET中MD5和SHA1加密的几种方法

MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),在90年代初由Mit Laboratory for Computer Science和Rsa data security inc的Ronald l. rivest开发出来,经md2.md3和md4发展而来.它的作用是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是md2.md4还是md5,它们都需要获得一个随机长度的信息并产