Tree charts are used to display data organized by tree structures. They are widely used, such as file systems (resource managers in Windows) in computers and composition structures of enterprises or companies. We know that in Windows, tools such as VB, PB, and Delphi provide a powerful tree-type control TreeView. Using the Treeview control, we can easily develop a tree chart. However, it is not so easy to implement tree embedding on the web page. NET uses the Internet Explorer WebControls provided by Microsoft to make the tree structure development on the web page as convenient as it is in Windows. The same functions are powerful and even more flexible.
This article describes how to use Internet Explorer WebControls to develop a tree chart. Due to the complex structure of the tree chart, I often do not know how to use it. I have recently used ASP for my company. the specific example of the Application Manager compiled by. NET is described in detail in ASP. NET, how to associate the use of Internet Explorer WebControls with the database to display data in multiple layers, so as to conveniently add, modify, delete, and move data. I hope that through the elaboration of this instance, I will bring you a better result, communicate with colleagues, and make progress together.
Internet Explorer WebControls is not in the Standard Server Control of VS. NET. To download the WebControls from the Microsoft website, you must:
Http://msdn.microsoft.com/downloads/samples/internet/default.asp? Url =/Downloads/samples/Internet/ASP_DOT_NET_ServerControls/WebControls/default. asp
When downloading and installing the Toolbox for the first time, right-click the Toolbox Customize Toolbox... → In. NET Framework Components, select Micosoft. Web. UI. WebControls. Treeview, And the Treeview control appears in the toolbox.
I. Tree Creation
The specific method is to create a database and design the TREE_INFO table of the tree chart, which contains the NODEID, PARENTID, NODENAME, ADDERSS, and ICON fields. Other fields are determined based on the actual business, the node name NODENAME is displayed on the node of the tree control. The NODEID field stores the unique ID of the node. PARENTID indicates the parent node number of the current node. the ID number forms a "linked list ", the structure of the nodes on the tree is recorded. Design a Web form and place the TreeView control on it.
Private Sub CreateDataSet () 'create a dataset
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
The basic idea of building a tree is to recursively call the display subtree from the root node.
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. Count-1). Nodes, intId)
Next
End Sub
2. add and delete Tree nodes
To Add, delete, or modify a node in a Treeview, you only need to use the Add, Remove, and other methods of the Nodes attribute. It is worth noting that. in NET, the Nodes set of Treeview is different from that in VS6.0. VS6.0 is a large set, while. in. NET, each Node in the hierarchy has the Nodes attribute. The addition, deletion, and modification of Tree nodes are significantly different from those of VS6.0, especially when a tree node is deleted.
Private Sub ButAdd_Click (ByVal sender As System. Object, ByVal e As System. EventArgs) Handles ButAdd. click' Add a subnode under the selected node
Dim tmpNd As New TreeNode (), NdSel As TreeNode
TmpNd. ID = GetNewId ()
NdSel = TreeView1.GetNodeFromIndex (TreeView1.SelectedNodeIndex) 'selected node
TmpNd. Text = "new node"
NdSel. Nodes. Add (tmpNd)
Dim myRow As DataRow
MyRow = ds. Tables ("tree"). NewRow ()
MyRow ("NODE_NAME") = tmpNd. ID
MyRow ("NODE_DESCRIPT") = "new node" & 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' Delete the selected node
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
'Obtain the Nodes set of the parent node of the selected node.
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
3. Modify and move a tree node
Because the server control does not support mouse drag, you cannot drag a node like a Windows program. Here, you can select a parent node. Moving is implemented by deleting the original location and adding a new location. Note that the node information is saved before deletion.
Private Sub treeviewincluselectedindexchange (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
'Move a node
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 set of the new parent node
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
'Search nodes with keywords
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