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
The specific method is: Create a database, design the tree graph information table Tree_info, contain NodeID, ParentID, NodeName, Adderss, Icon field, and other fields depending on the actual business, the Node NodeName will display on the node of the tree control, NodeID field Save the unique identification number of the node, ParentID indicates the parent node number of the current node, and the identification number consists of a "linked list" to record 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 to display the subtree
Private sub page_load (Byvale as system.Object, byval e as system.eventargs) handles mybase.loadcreatedata
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 tree nodes
Add, delete, modify the node simply in TreeView, just use the NODEs attribute add, remove, etc. It is a big collection, and VS.NET is a nodes property under each Node in the hierarchical. 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.selectedNodeIndeIndex ()
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, modification, mobile tree node
Since the server control does not support the mouse drag event, it is not possible to pass the moving node as a Windows program, here is the way to select the parent node. 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, treeview1.nodes) .Nodes' Node Collection of new parent 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.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.
