树形图用于显示按照树形结构进行组织的数据,其用途比较广泛,如计算机中的文件系统(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控件就出现在工具箱中了。
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
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
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