树形图用于显示按照树形结构进行组织的数据，其用途比较广泛，如计算机中的文件系统(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 = myConnmyDataAdapter.SelectCommand = myCmdmyDataAdapter.Fill(ds, "tree")End Sub
建树的基本思路是：从根节点开始递归调用显示子树
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.LoadCreateDataSet()intiTree(TreeView1.Nodes, 0)End SubPrivate Sub intiTree(ByRef Nds As TreeNodeCollection, ByVal parentId As Integer)Dim dv As New DataView()Dim drv As DataRowViewDim tmpNd As TreeNodeDim intId As Integerdv.Table = ds.Tables("tree")dv.RowFilter = "PARENTID=’" & parentId & "’"For Each drv In dvtmpNd = New TreeNode()strId = drv("NODE_ID")tmpNd.ID = strIdtmpNd.Text = drv("NODE_NAME ")tmpNd.ImageUrl = drv("ICON").ToStringNds.Add(tmpNd)intiTree(Nds(Nds.Count - 1).Nodes, intId)NextEnd 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 TreeNodetmpNd.ID = GetNewId()NdSel = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex)’选中的节点tmpNd.Text = "新节点"NdSel.Nodes.Add(tmpNd)Dim myRow As DataRowmyRow = ds.Tables("tree").NewRow()myRow("NODE_NAME") = tmpNd.IDmyRow("NODE_DESCRIPT") = "新节点" & tmpNd.ID & "_" & NdSel.IDmyRow("PARENT_NAME") = NdSel.IDds.Tables("tree").Rows.Add(myRow)End SubPrivate 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 Integerdv.Table = ds.Tables("tree")dv.RowFilter= "NODEID=" & NdIddv.Delete(0)End SubPrivate Function GetNdCol(ByVal idx As String) As TreeNodeCollection‘获得选中节点的父节点的Nodes集合Dim cnt As Integer, i As IntegerDim tmpNds As TreeNodeCollectionDim idxs() As Stringidxs = Split(idx, ".")cnt = UBound(idxs)If cnt = 0 ThentmpNds = TreeView1.NodesElsetmpNds = TreeView1.Nodes(CInt(idxs(0))).NodesFor i = 1 To cnt - 1tmpNds = tmpNds(CInt(idxs(i))).NodesNextEnd IfReturn tmpNdsEnd Function
三、修改、移动树节点
由于服务器控件不支持鼠标拖动事件，所以不能象Windows程序那样通过拖动移动节点，这里是通过选择父节点的方式。移动是通过在原位置删除，新位置添加实现的，要注意在删除时先保存节点信息。
Private Sub TreeView1_SelectedIndexChange(ByVal sender As Object, ByVal e As Microsoft.Web.UI.WebControls.TreeViewSelectEventArgs) Handles TreeView1.SelectedIndexChangeDim dv As New DataView()dv.Table = ds.Tables("tree")Dim tmpNd As TreeNode = TreeNdSel(e.OldNode), tmpNds As TreeNodeCollectiondv.RowFilter= "NODEID=" & tmpNd.IDdv(0)("NODE_DESCRIPT") = Me.TextBox1.Textdv(0)("ADDRESS") = Me.TextBox2.Textdv(0)("TARGET") = Me.TextBox3.Textdv(0)("ICON") = Me.TextBox4.TextIf dv(0)("PARENTID").ToString <> Me.DropDownList1.SelectedItem.Value Then‘移动节点dv(0)("PARENT_NAME") = Me.DropDownList1.SelectedItem.ValueIf Me.DropDownList1.SelectedItem.Value = "ROOT" ThentmpNds = TreeView1.NodesElsetmpNds = FromIdToNode(Me.DropDownList1.SelectedItem.Value, TreeView1.Nodes).Nodes’新的父节点的Nodes集合End IfGetNdCol(e.OldNode).Remove(tmpNd)tmpNds.Add(tmpNd)End IftmpNd.Text = Me.TextBox1.TexttmpNd.ImageUrl = Me.TextBox4.TexttmpNd = TreeView1.GetNodeFromIndex(TreeView1.SelectedNodeIndex)dv.RowFilter= "NODEID=" & tmpNd.IDMe.TextBox1.Text = dv(0)("NODENAME").ToStringMe.TextBox2.Text = dv(0)("ADDRESS").ToStringMe.TextBox3.Text = dv(0)("TARGET").ToStringMe.TextBox4.Text = dv(0)("ICON").ToStringEnd SubPrivate Function FromIdToNode(ByVal ID As String, ByVal Nds As TreeNodeCollection) As TreeNode‘由关键字查找节点Dim i As IntegerDim tmpNd As TreeNode, tmpNd1 As TreeNodeFor Each tmpNd In NdsIf tmpNd.ID = ID ThenReturn tmpNdExit FunctionEnd IftmpNd1 = FromIdToNode(ID, tmpNd.Nodes)If Not (tmpNd1 Is Nothing) ThenReturn tmpNd1Exit FunctionEnd IfNextReturn NothingEnd Function
四、结束语
以上阐述ASP.NET中树状显示的基本方法，以及如何在对树节点进行维护（增加、删除、修改、移动）的同时，修改数据库数据。由于篇幅所限，笔者在此只对基本思路和流程及关键步骤作了介绍，并未列出详细源代码，读者可自行完善。需要详细源代码者可与我联系，本文程序在VS.NET、SQLServer、Windows 2000、IIS5.0下调试通过。
