模板
教程
环境
性能
功能
管理
ASP.NET中树形图的实现
发表于：2007-07-01来源：作者：点击数：
标签：
树形图用于显示按照树形结构进行组织的数据，其用途比较广泛，如计算机中的文件系统( Windows 中的资源管理器)、企业或公司的组成结构等。我们知道在Windows下 VB 、PB、Delphi等工具提供了一个功能很强的树型控件TreeView，利用Treeview控件可以方便地 开发
树形图用于显示按照树形结构进行组织的数据，其用途比较广泛，如计算机中的文件系统(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控件。
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
|
单纯在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下调试通过。
