树形图用于显示按照树形结构进行组织的数据其用途比较广泛如计算机中的文件系统(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下调试通过
