樹形圖用於顯示按照樹形結構進行組織的數據其用途比較廣泛如計算機中的文件系統(Windows中的資源管理器)企業或公司的組成結構等我們知道在Windows下VBPBDelphi等工具提供了一個功能很強的樹型控件TreeView利用Treeview控件可以方便地開發樹形圖然而在網頁上實現樹形圖就不那麼容易了現在在ASPNET中利用微軟提供的Internet Explorer WebControls它使得網頁上的樹形圖開發與在Windows下一樣的方便一樣的功能強大甚至更靈活
本文介紹用Internet Explorer WebControls開發樹形圖的方法由於樹形圖結構較復雜使用起來常不知如何下手筆者結合最近剛為公司用ASPNET編寫的應用程序管理器這一具體實例詳細闡述在ASPNET下如何將Internet Explorer WebControls的使用與數據庫聯系起來實現數據分任意多層顯示方便地進行增加修改刪除移動操作筆者希望通過對該實例的闡述達到拋磚引玉的效果與各位同仁相互交流共同進步
Internet Explorer WebControls不在VSNET的標准Server Control中要到微軟的站點上下載下載地址是http://msdnmicrosoftcom/downloads/samples/internet/defaultasp？url=/Downloads/samples/Internet/ASP_DOT_NET_ServerControls/WebControls/defaultasp 下載安裝後第一次使用時要右擊工具箱Customize Toolbox…→NET Framework Components中找到MicosoftWebUIWebControlsTreeview後選中這樣Treeview控件就出現在工具箱中了
一樹的建立
具體方法是創建一個數據庫設計樹圖信息表TREE_INFO包含NODEIDPARENTIDNODENAMEADDERSSICON字段其它字段根據實際業務而定節點名稱NODENAME將在樹型控件的節點上顯示NODEID字段保存節點的唯一標識號PARENTID表示當前節點的父節點號標識號組成了一個鏈表記錄了樹上節點的結構設計一個Web窗體其上放置TreeView控件
Private Sub CreateDataSet()建立數據集
Dim myConn As New SqlConnection()
Dim myCmd As New SqlCommand(select NODEIDNODENAMEPARENTIDADDRESSICON from Tree_info myConn)
Dim myDataAdapter As New SqlDataAdapter()
myConnConnectionString = Application(connectstring)
myCmdCommandText =
myCmdConnection = myConn
myDataAdapterSelectCommand = myCmd
myDataAdapterFill(ds tree)
End Sub
建樹的基本思路是從根節點開始遞歸調用顯示子樹
Private Sub Page_Load(ByVal sender As SystemObject ByVal e As SystemEventArgs) Handles MyBaseLoad
CreateDataSet()
intiTree(TreeViewNodes )
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
dvTable = dsTables(tree)
dvRowFilter = PARENTID= & parentId &
For Each drv In dv
tmpNd = New TreeNode()
strId = drv(NODE_ID)
tmpNdID = strId
tmpNdText = drv(NODE_NAME )
tmpNdImageUrl = drv(ICON)ToString
NdsAdd(tmpNd)
intiTree(Nds(NdsCount )Nodes intId)
Next
End Sub
二增加刪除樹節點
單純在Treeview 上增加刪除修改節點只需用Nodes屬性的Add Remove等方法即可值得注意的地方是VSNET中Treeview的Nodes集合與VS中的區別VS中的是一個大的集合而VSNET中的是分層的每個Node下都有Nodes屬性增加刪除修改樹節點時與VS相比有很大差別特別是刪除時
Private Sub ButAdd_Click(ByVal sender As SystemObject ByVal e As SystemEventArgs) Handles ButAddClick在選定的節點下添加子節點
Dim tmpNd As New TreeNode() NdSel As TreeNode
tmpNdID = GetNewId()
NdSel = TreeViewGetNodeFromIndex(TreeViewSelectedNodeIndex)選中的節點
tmpNdText = 新節點
NdSelNodesAdd(tmpNd)
Dim myRow As DataRow
myRow = dsTables(tree)NewRow()
myRow(NODE_NAME) = tmpNdID
myRow(NODE_DESCRIPT) = 新節點 & tmpNdID & _ & NdSelID
myRow(PARENT_NAME) = NdSelID
dsTables(tree)RowsAdd(myRow)
End Sub
Private Sub ButDele_Click(ByVal sender As Object ByVal e As SystemEventArgs) Handles ButDeleClick刪除選中的節點
Dim idx As String = TreeViewSelectedNodeIndex()
GetNdCol(idx)Remove(TreeViewGetNodeFromIndex(idx))
Dim dv As New DataView() recNo As Integer
dvTable = dsTables(tree)
dvRowFilter= NODEID= & NdId
dvDelete()
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 = Then
tmpNds = TreeViewNodes
Else
tmpNds = TreeViewNodes(CInt(idxs()))Nodes
For i = To cnt
tmpNds = tmpNds(CInt(idxs(i)))Nodes
Next
End If
Return tmpNds
End Function
三修改移動樹節點
由於服務器控件不支持鼠標拖動事件所以不能象Windows程序那樣通過拖動移動節點這裡是通過選擇父節點的方式移動是通過在原位置刪除新位置添加實現的要注意在刪除時先保存節點信息
Private Sub TreeView_SelectedIndexChange(ByVal sender As Object ByVal e As MicrosoftWebUIWebControlsTreeViewSelectEventArgs) Handles TreeViewSelectedIndexChange
Dim dv As New DataView()
dvTable = dsTables(tree)
Dim tmpNd As TreeNode = TreeNdSel(eOldNode) tmpNds As TreeNodeCollection
dvRowFilter= NODEID= & tmpNdID
dv()(NODE_DESCRIPT) = MeTextBoxText
dv()(ADDRESS) = MeTextBoxText
dv()(TARGET) = MeTextBoxText
dv()(ICON) = MeTextBoxText
If dv()(PARENTID)ToString <> MeDropDownListSelectedItemValue Then
移動節點
dv()(PARENT_NAME) = MeDropDownListSelectedItemValue
If MeDropDownListSelectedItemValue = ROOT Then
tmpNds = TreeViewNodes
Else
tmpNds = FromIdToNode(MeDropDownListSelectedItemValue TreeViewNodes)Nodes新的父節點的Nodes集合
End If
GetNdCol(eOldNode)Remove(tmpNd)
tmpNdsAdd(tmpNd)
End If
tmpNdText = MeTextBoxText
tmpNdImageUrl = MeTextBoxText
tmpNd = TreeViewGetNodeFromIndex(TreeViewSelectedNodeIndex)
dvRowFilter= NODEID= & tmpNdID
MeTextBoxText = dv()(NODENAME)ToString
MeTextBoxText = dv()(ADDRESS)ToString
MeTextBoxText = dv()(TARGET)ToString
MeTextBoxText = dv()(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 tmpNd As TreeNode
For Each tmpNd In Nds
If tmpNdID = ID Then
Return tmpNd
Exit Function
End If
tmpNd = FromIdToNode(ID tmpNdNodes)
If Not (tmpNd Is Nothing) Then
Return tmpNd
Exit Function
End If
Next
Return Nothing
End Function
四結束語
以上闡述ASPNET中樹狀顯示的基本方法以及如何在對樹節點進行維護（增加刪除修改移動）的同時修改數據庫數據由於篇幅所限筆者在此只對基本思路和流程及關鍵步驟作了介紹並未列出詳細源代碼讀者可自行完善需要詳細源代碼者可與我聯系本文程序在VSNETSQLServerWindows IIS下調試通過
From:http://tw.wingwit.com/Article/program/net/201311/15457.html
