Treeview control experience ===reprinted

Treeview control experience ===reprinted

I have summarized my thoughts on using the MS tree control and shared it with you. Of course, some good opinions from other netizens have been input into it. If you have any other omissions, please do not hesitate to give me some advice!

I believe that as long as you carefully read this article and refer to the provided routine, you will be able to master the basic usage of the tree!

1. To do this, you must first sharpen your tools. First, ensure that your components are installed. This package is very easy to install. You can find and use it in the toolbar of vs. Net after you run it:
Http: // 218.56.11.178: 8018/filedown. aspx? FID = 4
You can also check whether the official website has a new version:
Http://msdn.microsoft.com/downloads/samples/internet/default.asp? Url =/downloads/samples/Internet/asp_dot_net_servercontrols/webcontrols/default. asp

2. Several common attributes and Methods
~ Index to obtain the position of a tree node in the tree node set.
~ Nodes gets the set of Tree nodes allocated to the Tree View control.
~ Parent gets or sets the parent container of the control.
~ Selectednode gets or sets the currently selected tree node in the Tree View control.
~ Expandall expands all Tree nodes.
~ Checked gets or sets a value to indicate whether the tree node is selected.
~ Text gets or sets the text displayed in the tree node label.
~ Expand expand the tree node.
~ Clear
~ Remove removes the current Tree node from the Tree View control.
The above is summarized by other netizens and added:
~ Height control height
~ Width Control width
~ Backcolor background color
~ Bordercolor border color
~ Borderstyle border Style
~ Borderwidth Border Width
~ CSS class name that cssclass applies to the control
~ The node icon displayed when the expandedimageurl is expanded
~ Imageurl is not selected or expanded as the displayed node icon
~ Selectedimageurl: node icon displayed in the selected status
~ Indent indent distance, effective only when showlines is set to true.
~ Whether showlines displays hierarchical connection lines
~ Show plus +/-symbol button
~ Showtooltip displays a tooltip on the parent node (use the plus sign (+/-) to expand or close it ).
~ Keyboard shortcut used by the accseekey Control
~ If Autoselect is set to true, a new node is automatically selected when the node is moved by the keyboard.
~ Autopostback
~ Enabled controls the enabled status of controls
~ Whether the enableviewstate control automatically saves its status for round-trip
~ The expandlevel initialization control is the number of layers for expanding nodes.
~ Whether to expand the node automatically when selectexpands is selected as a contact
~ Tabindex Tab key order
~ Visible Control

3. Practical Skills:
1) How to click the text (not +/-) to expand (contract) The subnode
Set the showtooltip attribute of the tree to false.

2) How can I not display "node name: User +/-to expand/collapse" when the mouse points to a parent contact"
Set the selectexpands attribute of the tree to true.

3) No tree display
First: the control package is not installed. Use the control package described above to wrap it.
Second, Treeview requires that the client browser version be ie5.5 or later. It is recommended that the client be upgraded to ie6.0

4) flashing
If the autopostback attribute is set to true, selectedindexchange can be executed. However, the refresh will be amazing. If you do not need to refresh, set the autopostback attribute to false.

5) How to automatically select a new node and execute a new node when the focus is moved by pressing the left and right buttons on the keyboard
Set the tree Autoselect attribute to true.

6) do not want to display the +/-symbol button?
Set the showplus attribute of the tree to false.

7) do not want to display hierarchical connection lines?
Set the showlines attribute of the tree to false.

8) how to set the icon next to a node
~ The three attributes of expandedimageurl, imageurl, and selectedimageurl are the control icons. You can select the one you like.

4. Let's take a look at this example. It is a walking tree, but it may be difficult to use it:
Http: // 218.56.11.178: 8018/filedown. aspx? FID = 1, 246

5. this forum also uses the tree (Asp.net + C # + MSSQL 2000) and the code is open. If you think it is of reference value, you can install it, it also contains some other commonly used Asp.net programming skills, demonstrating how the tree control can be combined with the database to dynamically display the data in the database. This tree has only two layers, but it is more practical:
Http: // 218.56.11.178: 8018/filedown. aspx? FID = 1, 212
Tree. aspx and tree. aspx. CS are the main components used by the tree control.

The actual application demonstration address of the forum, here:
Http://expert.kaer.cn/

 

 

 

Treeview usage highlights hgknight (original)

I posted a special post in the Forum, but I cannot find some questions due to the loss of the post. I also added some questions this time. I can send them to the document area to facilitate query.
Original post
Http://expert.csdn.net/Expert/topic/1525/1525202.xml

1.
Http://msdn.microsoft.com/downloads/samples/internet/ASP_DOT_NET_ServerControls/WebControls/default.asp
The downloaded version is a version suffixed with BAT.
(1)buyun.direct the buyun.bat to the csc.exe path to generate Microsoft. Web. UI. webcontrols. dll.
(2) create an empty directory webctrl_client/issue 0 under wwwroot.
(3) copy the build/runtime file to webctrl_client/runtime 0.
(4) Select the custom toolbox of the Toolbox and add Microsoft. Web. UI. webcontrols. dll.
Some troubles
However, if you can find that the suffix is the automatic installation version of MSI, just click Next (I have been using this version, Hoho)
After installation, add the Treeview to the Toolbox through "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. It is recommended that the client be upgraded to ie6.0

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, it is best to add namespace: using Microsoft. Web. UI. webcontrols;

6. traverse the Treeview node (recursive algorithm)
Private void page_load (Object sender, system. eventargs E)
{
Getallnodetext (treeview1.nodes );
}
Void getallnodetext (treenodecollection TNC)
{
Foreach (treenode node in TNC)
{
If (node. nodes. Count! = 0)
Getallnodetext (node. nodes );
Response. Write (node. Text + "");
}
}

7. Obtain the parent node of the node.
Treenode pnode;
If (node. parent is treenode)
Pnode = (treenode) node. parent;
Else
// Node is Root Node

8. Modify the Treeview style (example)
<Iewc: Treeview id = "treeview1" runat = "server" hoverstyle = "color: Blue; Background: #00 ffcc;" defaultstyle = "Background: red; color: yellow; "selectedstyle =" color: red; Background: #00ff00; ">
Code:
Treeview1.defaultstyle ["font-size"] = "20pt ";

9. The node is not submitted when it is expanded. It is submitted only when the node selection is changed.
Set autopostback to false;
Add <body onload = "inittree ()">
Then write in pageload:
String strtreename = "treeview1 ";
String strref = page. getpostbackeventreference (treeview1 );
String strscript = "<script language =/" javascript/">/N" + "<! --/N "+" function inittree () {/N "+" + strtreename + ". onselectedindexchange = function () {/N" + "If (event. oldtreenodeindex! =
Event. newtreenodeindex)/n "+" this. queueevent ('onselectedindexchang', event. oldtreenodeindex + ',' + event. newtreenodeindex);/N "+" window. setTimeout ('"+ strref. replace ("'", "//'") + "', 0, 'javascript '); /n "+"}/N "+"}/N "+" // -->/N "+" </SCRIPT> ";
Page. registerclientscriptblock ("inittree", strscript );
 
In this way, you can only submit the changed node!

10. Combine Treeview with XML
Set the XML file to the following format, and directly set treenodesrc to the XML file.
<? XML version = "1.0" encoding = "gb2312"?>
<Treenodes>
<Treenode text = "node0" expanded = "true">
<Treenode text = "node1"/>
<Treenode text = "node2"/>
</Treenode>
<Treenode text = "node3" navigateurl = "3. aspx"/>
</Treenodes>
Or use the code
Treeview1.treenodesrc = "A. xml ";
Treeview1.databind ();

 

Client control Treeview
Http://expert.csdn.net/Expert/topic/1382/1382892.xml

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

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

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

4. Click nodes.
Function treeview1.onclick ()
{
Alert (treeview1.gettreenode (treeview1.clickednodeindex). getattribute ("text "));
}

5. add nodes
Function addnode ()
{
VaR node = treeview1.createtreenode ();
Node. setattribute ("text", "hgknight ");
Treeview1.add (node );
}

6. js traverses all nodes
VaR allrootnode = new array ();
Allrootnode = treeview1.getchildren ();
Alertnode (allrootnode );

Function alertnode (nodearray)
{
If (parseint (nodearray. Length) = 0)
Return;
Else
{
For (I = 0; I <nodearray. length; I ++)
{
VaR cNode;
CNode = nodearray [I];
Alert (cNode. getattribute ("text "));
If (parseint (cNode. getchildren (). Length )! = 0)
Alertnode (cNode. getchildren ());
}
}
}