How to Use the Treeview control in ASP. NET

How to Use the Treeview control --

 

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. Currently, in ASP. NET, the Internet Explorer webcontrols provided by Microsoft is used to make the tree structure development on web pages as convenient as in Windows. The same functions are powerful and even more flexible.

1.
After the http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp is installed, add the Treeview to the Toolbox through the custom toolbox->. NET Framework component

2. Unable to display during running
This is generally the version of Treeview. It is best to download the English version of Automatic Installation and reinstall it. Before installation, remove the original version from the Add/delete program.

3. Display format Error(Non-Tree display)
Treeview requires that the client browser version be ie5.5 or later.

4. Use Treeview IN THE FRAMEWORK
Sets the navigateurl and target attributes to update other frames.

5. The treenode class cannot be found.
To use Treeview, you need to add namespace: using Microsoft. Web. UI. webcontrols;

6. traverse the Treeview Node
The following is an example of using the Treeview control to generate a tree navigation. Multi-level menus can be generated infinitely.

Tree Structure table para_item
Item_id (node ID) item_name (node name) parent_id (parent node ID)
1 All 0
2 AAA 1
3 BBB 1
4 aaa_1 2
5 bbb_1 3
 
// Page Initialization
Private void page_load (Object sender, system. eventargs E)
{
// Define database connection
Sqlconnection sqlconection_tree = new sqlconnection ();
// Initialize the connection string
Sqlconection_tree.connectionstring = session ["connstring"]. tostring ();
// Open the connection
Sqlconection_tree.open ();
 
// Obtain the FAQ tree directory node
Sqldataadapter sqldataadapter_tree = new sqldataadapter ("select item_id, item_name, parent_id from para_item", sqlconection_tree );
Dataset dataset_tree = new dataset ();
Sqldataadapter_tree.fill (dataset_tree );
This. viewstate ["dataset_tree"] = dataset_tree;

// Call a recursive function to generate a Tree Structure
Addtree (0, (treenode) null );
}

// Recursively Add the node parameter parentid of the tree as the maximum parent node of the tree
Public void addtree (INT parentid, treenode pnode)
{
Dataset dataset_tree = (Dataset) This. viewstate ["dataset_tree"];
Dataview dataview_tree = new dataview (dataset_tree.tables [0]);
// Filter the parentid and obtain that the current parentid is the parent node ID.
Dataview_tree.rowfilter = "[parent_id] =" + parentid;

// Recursive loop
Foreach (datarowview row in dataview_tree)
{
// Declare a node
Treenode node = new treenode ();
// Bind a hyperlink
Node. navigateurl = "list. aspx? Item_id = "+ row [" item_id "]. tostring ();
// Start Recursion
If (pnode = NULL)
{
// Add the root node
Node. Text = row ["item_name"]. tostring ();
Treeview_tree.nodes.add (node );
Node. Expanded = true; // expand node status
Addtree (int32.parse (row ["item_id"]. tostring (), node); // recursive again
}
Else
{
// Add the subnode of the current node
Node. Text = row ["item_name"]. tostring ();
Pnode. nodes. Add (node );
Node. Expanded = true; // expand node status
Addtree (int32.parse (row ["item_id"]. tostring (), node); // recursive again
}
}
// Close the connection
Sqlconection_tree.close ();
}

The generated tree is as follows:
All
|-Aaa
|-Aaa_1
|-Bbb
|-Bbb_1

7. Control the opening/merging status of the parent node
Treeview_tree.getnodefromindex ("1"). Expanded = false/true;

8. Clear all child nodes under a parent node
Treeview_indexleft.getnodefromindex ("1"). nodes. Clear ();

9. Set the selected node. For example, select the second node.
Function setselnode ()
{
Treeview_tree.selectednodeindex = "1 ";
}

10. Get the text, ID, or nodedata of the selected node.
Function getattribute ()
{
Alert (treeview_tree.gettreenode (treeview_tree.selectednodeindex). getattribute ("text "));
}
// Replace text with ID or nodedata to obtain the ID or nodedata of the selected node.

11. Modify node attributes, such as modifying the text of the first node
Function modifynode ()
{
VaR node = treeview_tree.gettreenode ("0 ");
Node. setattribute ("text", "first node ");
}

12. add nodes
Function addnode ()
{
VaR node = treeview_tree.createtreenode ();
Node. setattribute ("text", "first node ");
Treeview_tree.add (node );
}

13. selectedindexchange in Treeview is not executed
Autopostback = true, selectedindexchange can be executed.

14. Determine whether a subnode exists under a node of the Treeview.
If (selectnode. nodes. Count = 0)
{
// The node does not have a byte
}

Http://www.weste.net/2005/7-18/10210076959.html (another graphical example)