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控件。

 1 Private Sub CreateDataSet()’建立数据集 
 2 Dim myConn As New SqlConnection() 
 3 Dim myCmd As New SqlCommand("select NODEID,NODENAME,PARENTID,ADDRESS,ICON from Tree_info", myConn) 
 4 Dim myDataAdapter As New SqlDataAdapter() 
 5 myConn.ConnectionString = Application("connectstring") 
 6 myCmd.CommandText = "" 
 7 myCmd.Connection = myConn 
 8 myDataAdapter.SelectCommand = myCmd 
 9 myDataAdapter.Fill(ds, "tree") 
10 End Sub 

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

 1 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
 2 CreateDataSet() 
 3 intiTree(TreeView1.Nodes, 0) 
 4 End Sub 
 5 Private Sub intiTree(ByRef Nds As TreeNodeCollection, ByVal parentId As Integer) 
 6 Dim dv As New DataView() 
 7 Dim drv As DataRowView 
 8 Dim tmpNd As TreeNode 
 9 Dim intId As Integer 
10 dv.Table = ds.Tables("tree") 
11 dv.RowFilter = "PARENTID=’" & parentId & "’" 
12 For Each drv In dv 
13 tmpNd = New TreeNode() 
14 strId = drv("NODE_ID") 
15 tmpNd.ID = strId 
16 tmpNd.Text = drv("NODE_NAME ") 
17 tmpNd.ImageUrl = drv("ICON").ToString 
18 Nds.Add(tmpNd) 
19 intiTree(Nds(Nds.Count - 1).Nodes, intId) 
20 Next 
21 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’在选定的节点下添加子节点 

 1 Dim tmpNd As New TreeNode(), NdSel As TreeNode 
 2 tmpNd.ID = GetNewId() 
 3 NdSel = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex)’选中的节点 
 4 tmpNd.Text = "新节点" 
 5 NdSel.Nodes.Add(tmpNd) 
 6 Dim myRow As DataRow 
 7 myRow = ds.Tables("tree").NewRow() 
 8 myRow("NODE_NAME") = tmpNd.ID 
 9 myRow("NODE_DESCRIPT") = "新节点" & tmpNd.ID & "_" & NdSel.ID 
10 myRow("PARENT_NAME") = NdSel.ID 
11 ds.Tables("tree").Rows.Add(myRow) 
12 End Sub 
13 Private Sub ButDele_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles ButDele.Click’删除选中的节点 
14 Dim idx As String = TreeView1.SelectedNodeIndex() 
15 GetNdCol(idx).Remove(TreeView1.GetNodeFromIndex(idx)) 
16 Dim dv As New DataView(), recNo As Integer 
17 dv.Table = ds.Tables("tree") 
18 dv.RowFilter= "NODEID=" & NdId 
19 dv.Delete(0) 
20 End Sub 
21 Private Function GetNdCol(ByVal idx As String) As TreeNodeCollection 
22 ‘获得选中节点的父节点的Nodes集合 
23 Dim cnt As Integer, i As Integer 
24 Dim tmpNds As TreeNodeCollection 
25 Dim idxs() As String 
26 idxs = Split(idx, ".") 
27 cnt = UBound(idxs) 
28 If cnt = 0 Then 
29 tmpNds = TreeView1.Nodes 
30 Else 
31 tmpNds = TreeView1.Nodes(CInt(idxs(0))).Nodes 
32 For i = 1 To cnt - 1 
33 tmpNds = tmpNds(CInt(idxs(i))).Nodes 
34 Next 
35 End If 
36 Return tmpNds 
37 End Function

 

三、修改、移动树节点

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

 1 Private Sub TreeView1_SelectedIndexChange(ByVal sender As Object, ByVal e As Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs) Handles TreeView1.SelectedIndexChange 
 2 Dim dv As New DataView() 
 3 dv.Table = ds.Tables("tree") 
 4 Dim tmpNd As TreeNode = TreeNdSel(e.OldNode), tmpNds As TreeNodeCollection 
 5 dv.RowFilter= "NODEID=" & tmpNd.ID 
 6 dv(0)("NODE_DESCRIPT") = Me.TextBox1.Text 
 7 dv(0)("ADDRESS") = Me.TextBox2.Text 
 8 dv(0)("TARGET") = Me.TextBox3.Text 
 9 dv(0)("ICON") = Me.TextBox4.Text 
10 If dv(0)("PARENTID").ToString <> Me.DropDownList1.SelectedItem.Value Then 
11 ‘移动节点 
12 dv(0)("PARENT_NAME") = Me.DropDownList1.SelectedItem.Value 
13 If Me.DropDownList1.SelectedItem.Value = "ROOT" Then 
14 tmpNds = TreeView1.Nodes 
15 Else 
16 tmpNds = FromIdToNode(Me.DropDownList1.SelectedItem.Value, TreeView1.Nodes).Nodes’新的父节点的Nodes集合 
17 End If 
18 GetNdCol(e.OldNode).Remove(tmpNd) 
19 tmpNds.Add(tmpNd) 
20 End If 
21 tmpNd.Text = Me.TextBox1.Text 
22 tmpNd.ImageUrl = Me.TextBox4.Text 
23 tmpNd = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex) 
24 dv.RowFilter= "NODEID=" & tmpNd.ID 
25 Me.TextBox1.Text = dv(0)("NODENAME").ToString 
26 Me.TextBox2.Text = dv(0)("ADDRESS").ToString 
27 Me.TextBox3.Text = dv(0)("TARGET").ToString 
28 Me.TextBox4.Text = dv(0)("ICON").ToString 
29 End Sub 
30 Private Function FromIdToNode(ByVal ID As String, ByVal Nds As TreeNodeCollection) As TreeNode 
31 ‘由关键字查找节点 
32 Dim i As Integer 
33 Dim tmpNd As TreeNode, tmpNd1 As TreeNode 
34 For Each tmpNd In Nds 
35 If tmpNd.ID = ID Then 
36 Return tmpNd 
37 Exit Function 
38 End If 
39 tmpNd1 = FromIdToNode(ID, tmpNd.Nodes) 
40 If Not (tmpNd1 Is Nothing) Then 
41 Return tmpNd1 
42 Exit Function 
43 End If 
44 Next 
45 Return Nothing 
46 End Function 

 

四、结束语

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