Asp.net-treeview

Source: Internet
Author: User

To set a node picture:

    • In the tree-like resource structure on the left side of Windows Explorer, each node has a picture connection, such as a picture of a disk, a picture of a disc, and a picture of a folder, to make the resource more visually expressive. The Iewebcontrols TreeView control can also link a picture to a node, which requires the following 3 properties to be associated to the node's standard state (not expanded, unchecked), expanded state, and checked state.
    • ImageUrl property: The address of the picture that is displayed when TreeNode is in the standard state.
    • Expandimageurl property: The address of the picture that is displayed when TreeNode is in the expanded state.
    • Selecteimageurl property: The address of the picture that is displayed when TreeNode is selected.

To dynamically add and remove TreeNode nodes:

If the node in the TreeView control is constant throughout the lifetime of the program, you can use the node editor to edit it during programming, or add it manually in the HTML markup of the page. It can also change the dynamic of the nodes according to the needs of the data changes in the program running. Call the Remove method to remove the node by calling the Add method and AddAt method of the TreeView control's Nodes collection in the background code to add the node.

  • A The Nodes.Add method Nodes.Add method joins a node to the control, and the added node is placed on the last side of the control. The next segment of the program can add a new node to the control TreeView1: TreeNode newnode=new TreeNode (); Newnode.text= "Department of Humanities"; TREEVIEW1.NODES.ADD (NewNode);
  • Two Nodes.addat method The Nodes.addat method joins a node to a control, you specify the index position of the node, so you can insert the node in the middle of the original node. The next segment of the program inserts a node into the beginning of the tree. Create a new node TreeNode newnode=new TreeNode (); newnode.text= "Metallurgical Vocational Institute"; Add a new node to the Nodes collection in TreeView1.Nodes.AddAt (0,newnode);
  • Three The Nodes.remove method Nodes.remove method removes a node from a TreeView control.  The downstream program removes the second node in the tree. TreeView1.Nodes.Remove (Treeview1.nodes[1]); The nodes that are added by the Nodes.Add method or the Nodes.addat method that call the TreeView control directly are the top-level nodes, and the top-level node is called by the Nodes.remove method to insert the node to any level, or to remove the non-top-level node: Before calling the 3 methods above, there is a way to distinguish the hierarchy of nodes, which is used in the TreeView control's Getnodefromindex () method.
  • Four The Getnodefromindex method Getnodefromindex method returns a reference to the node specified by the parameter index number. The format of the call is: Treeview1.getnodefromindex ("x.y.z ...") where TreeView1 is the current tree control, and the parameter x.y.z indicates the level of the node, such as "1.2" for the node with the top-level index number 1 and its next level index number 2.
  • (v) Deletion of non-top-level nodes when you want to delete the top-level index number 1, and its next level index number is 2, you can write the following code://Get the node TreeNode delnode=this. Treeview1.getnodefromindex ("1.2"); Delete the node delnode.remove ();
  • (vi) inserting a non-top-level node to insert a node at the top-level index number of 1, with the next-level index number 2, you can write the following code://Create a new node TreeNode newnode1=new TreeNode (); newnode1.text= "Multimedia Department"; Gets the node node of the insertion position TreeNode addnode=this. Treeview1.getnodefromindex ("1.2");//Insert new node into addNode.Nodes.AddAt (1,NEWNODE1);

To read node data from an XML file:

The node editor is used to edit the nodes of the TreeView control, only when the node structure is predictable during the programming phase. Although the node can be dynamically modified thereafter, it must be implemented by the program code, if the structure of the node is inconsistent with the program code, you must modify the program code. Asp. NET allows the tree control node data to be written in an XML document that the program reads from this document to construct a tree-type control node. If the resource represented by the control node changes, you only need to modify the XML document, and you do not need to modify the program code.

  • (i) The node data that reads the tree control from the XML document creates a Web application project and drags a TreeView control into the page. Opens the Properties window for the control TreeView1, sets the Expandedimageurl, ImageUrl, and Selectedimageurl properties of the control's node, which specifies the picture address when the node is expanded or selected.
  • (ii) Edit the XML file for the node in the Vs.net integrated development environment, select the menu "project (P) → add New Item (W)", select "XML File" in the template box to the right of the Add New Item dialog box, and enter the name of the XML file in the Name box. This example enters the name "Xmltreeviewnode.xml" and then clicks the "Open" button to switch to the edit window of the XML file, and the contents of the edited file are as follows: <?xml version= "1.0" encoding= "Utf-8"?> <TREENODES> <treenode text= "commodities head" > <treenode text= "agricultural Products" > <treenode text= "Fruit" ></treenode > <treenode text= "Food" ></TreeNode> </TreeNode> <treenode text= "Daily Chemicals" ><treenode text= " Washing supplies "></TreeNode> <treenode text=" Cosmetics "></TreeNode> </TreeNode> <treenode text=" department store " > <treenode text= "apparel" ></TreeNode> <treenode text= "shoes and Hats" ></TreeNode> </TreeNode> < TreeNode text= "Home appliances" > <treenode text= "refrigerators" ></TreeNode> <treenode text= "Washing machines" ></TreeNode> < /treenode> </TreeNode> </TREENODES> Only one root tag is allowed in this XML document <TREENODES></TREENODES> All node tags must be placed within this root tag, and the tag tag treenodes must be capitalized. Each node label <treenode ></TreeNode> defines a node, the node tag can be nested, and the nesting level indicates the structure of the node.
  • (c) Specifies that the TreeNodeSrc property of the TreeView control needs to specify the TreeNodeSrc property of the TreeView control to indicate the node data and structure of the TreeView control from the file. Note Open the Properties window for the TreeView control, and on the TreeNodeSrc property, specify the file "Xmltreeviewnode.xml" whose value is just written.
  • (d) Control effect run program, effect such as.

  

Asp.net-treeview

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.