From: DOTNET Chinese Technology Network
The tree map is used to display data that is tissue according to the tree structure, which is widely used, such as file systems in the computer (resource manager in Windows), corporate or company constituting structures. We know that Tool TreeView with VB, PB, Delphi and other tools under Windows, which can easily develop tree charts using the TreeView control. However, it is not so easy to implement a tree chart on the web page. Now use Microsoft's Internet Explorer WebControls provided in ASP.NET. It makes the tree map on the web and is as convenient to Windows, and even the same function is powerful. More flexible. This article describes how to develop tree graphs with Internet Explorer WebControls. Because the tree diagram structure is more complicated, it is often used to start with it. The author combined with the specific instance of the application manager that has just been prepared to use ASP.NET, explain how to connect Internet Explorer WebControls in ASP.NET to connect to the database, and implement the data division any multi-layer display, conveniently Increase, modify, delete, and move. The author hopes that by the elaboration of this example, the author has achieved the effect of throwing bricks, and communicating with all the colleagues and progress together. Internet Explorer WebControls is not in the standard Server Control in VS.NET, downloaded to Microsoft's site, download address is: http://msdn.microsoft.com/downloads/samples/internet/Default.asp? URL = / Downloads / when samples / Internet / ASP_DOT_NET_ServerControls / WebControls / default.asp download for the first time after installation, you want to right-click the Toolbox Customize Toolbox ... after finding Micosoft.Web.UI.WebControls.Treeview → .NET Framework Components in check, so Treeview control It appears in the toolbox. First, the establishment of the tree is: Create a database, design the tree graph information table Tree_info, including NodeID, ParentID, NodeName, Adderss, Icon field, and other fields depending on the actual business, the node name NodeName will be in the node of the tree control The NodeID field saves the unique identification number of the node, and the ParentId represents the parent node number of the current node, the identification number consists of a "linked list", which records the structure of the node on the tree. Design a web form to place the TreeView control.
Private sub createDataSet () 'Establishing a data set
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: Remissive call from the root node display Sub Tree Private Sub Page_Load (Byval E as System.EventArgs) Handles MyBase.10Ad
CreateDataSet ()
Intitree (TreeView1.nodes, 0)
End Sub
Private subnetode (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
Second, increase, delete the tree node is simply added, deleted, and modify the node on TreeView, and modify the NODD, REMOVE, etc. The difference, the VS6.0 is a big collection, and the vs.net is a nodes property under each Node in the hierarchy. Increase, delete, modify the tree node, which is very different from VS6.0, especially when deleting.
Private Sub Butadd_Click (Byval e as system.Eventargs) handles butadd.click 'adds a child node in 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 E AS Object, Byval E AS System.EventArgs) Handles Butdele.Click 'Delete Selected Nodes
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
'Get the nodes collection 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)). Nodes
For i = 1 to CNT - 1
Tmpnds = Tmpnds (CINT (IDXS (I))). Nodes
NEXT
END IF
Return TMPNDS
END FUNCTION
Third, modify, the mobile tree node Since the server control does not support the mouse drag event, it is not like the Windows program to be dragged by dragging the moving node, here is the way in which the parent node is selected. Mobile is achieved by deleting in the original location, the new location is implemented, pay attention to save the node information before deleting.
Private Sub TreeView1_selected Indexchange (Byval e as microsoft.web.ui.webcontrols.treeviewselecteventAndargs) 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.dropdownload1.SelectedItem.Value Then
'Mobile node
DV (0) ("parent_name") = me.dropdownlist1.selectedItem.Value
If me.dropdownloadlist1.selectedItem.Value = "root" then
TMPNDS = TreeView1.nodes
Else
TMPNDS = fromidtonode (me.dropdownlist1.selecteditem.value, treai, treeview1.nodes) .nodes' new parent node Node Collection Endes
Getndcol (E.OLDNODE) .Remove (TMPND)
Tmpnds.Add (TMPND)
END IF
TMPND.TEXT = Me.TextBox1.text
TMPND.ImageURL = Me.TextBox4.text
TMPND = TreeView1.GetNodeFromindex (TreeView1.SelectedNodeInde)
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 NDS as Treenodecollection) As Treenode
'Find nodes by keyword
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
Fourth, conclude
The basic method of tree display in ASP.NET is described, and how to modify the database data while maintaining (increasing, deleting, modifying, moving) on the tree node. Due to the limited space limit, the author only introduces basic ideas and processes and key steps, and does not list the detailed source code, readers can improve themselves. You need to contact me if you need a detailed source code, this article is programs to be programs under VS.NET, SQLServer, Windows 2000, IIS5.0.
