This article will introduce you to the new Code of the TreeView in javascript. If you need to know about it, you can refer to it.
Example 1
The Code is as follows: |
Copy code |
Function public_GetParentByTagName (element, tagName) { Var parent = element. parentNode; Var upperTagName = tagName. toUpperCase (); // If this element is not the desired tag, continue to trace While (parent & (parent. tagName. toUpperCase ()! = UpperTagName )) { Parent = parent. parentNode? Parent. parentNode: parent. parentElement; } Return parent; } // Set the node's parent node Cheched -- this node is accessible, and its parent node must also be accessible. Function setParentChecked (objNode) { Var objParentDiv = public_GetParentByTagName (objNode, "div "); If (objParentDiv = null | objParentDiv = "undefined ") { Return; } Var objID = objParentDiv. getAttribute ("ID "); ObjID = objID. substring (0, objID. indexOf ("Nodes ")); ObjID = objID + "CheckBox "; Var objParentCheckBox = document. getElementById (objID ); If (objParentCheckBox = null | objParentCheckBox = "undefined ") { Return; } If (objParentCheckBox. tagName! = "INPUT" & objParentCheckBox. type = "checkbox ") Return; ObjParentCheckBox. checked = true; SetParentChecked (objParentCheckBox ); } // Set the node's subnode uncheched -- this node is not accessible, and its subnodes are not accessible. Function setChildUnChecked (divID) { Var objchild = divID. children; Var count = objchild. length; For (var I = 0; I <objchild. length; I ++) { Var tempObj = objchild [I]; If (tempObj. tagName = "INPUT" & tempObj. type = "checkbox ") { TempObj. checked = false; } SetChildUnChecked (tempObj ); } } // Set the node's subnode cheched -- this node can be accessed, and its subnodes can also be accessed. Function setChildChecked (divID) { Var objchild = divID. children; Var count = objchild. length; For (var I = 0; I <objchild. length; I ++) { Var tempObj = objchild [I]; If (tempObj. tagName = "INPUT" & tempObj. type = "checkbox ") { TempObj. checked = true; } SetChildChecked (tempObj ); } } // Trigger the event Function CheckEvent () { Var objNode = event. srcElement; If (objNode. tagName! = "INPUT" | objNode. type! = "Checkbox ") Return; If (objNode. checked = true) { SetParentChecked (objNode ); Var objID = objNode. getAttribute ("ID "); Var objID = objID. substring (0, objID. indexOf ("CheckBox ")); Var objParentDiv = document. getElementById (objID + "Nodes "); If (objParentDiv = null | objParentDiv = "undefined ") { Return; } SetChildChecked (objParentDiv ); } Else { Var objID = objNode. getAttribute ("ID "); Var objID = objID. substring (0, objID. indexOf ("CheckBox ")); Var objParentDiv = document. getElementById (objID + "Nodes "); If (objParentDiv = null | objParentDiv = "undefined ") { Return; } SetChildUnChecked (objParentDiv ); } }
Server-side control operations This. tvPrivilege. Attributes. Add ("OnClick", "CheckEvent ()");
|
Example 2
TreeView control refreshing
3. The tree. aspx code is as follows:
........................................ ........................................ ....
The Code is as follows: |
Copy code |
<% @ Page language = "c #" Codebehind = "createTree. aspx. cs" AutoEventWireup = "false" Inherits = "treeviewDemo. createTree" %> <% @ Register TagPrefix = "iewc" Namespace = "Microsoft. Web. UI. WebControls" Assembly = "Microsoft. Web. UI. WebControls" %> <% @ Register TagPrefix = "ajax" Namespace = "MagicAjax. UI. Controls" Assembly = "MagicAjax" %> <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <Title> createTree </title> <Meta name = "GENERATOR" Content = "Microsoft Visual Studio. NET 7.1"> <Meta name = "CODE_LANGUAGE" Content = "C #"> <Meta name = "vs_defaultClientScript" content = "JavaScript"> <Meta name = "vs_targetSchema" content = "http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <Body MS_POSITIONING = "GridLayout"> <Form id = "Form1" runat = "server" method = "post"> Query dynamic database information and display it by category. <Ajax: AjaxPanel id = "panel1" runat = "server" Width = "584px" Height = "216px" style = "Z-INDEX: 101; LEFT: 64px; POSITION: absolute; TOP: 56px "> <Iewc: TreeView id = "TreeView1" runat = "server" AutoPostBack = "True" SelectExpands = "True"> </iewc: TreeView> <Asp: TextBox id = "tbNode" Runat = "server"> </asp: TextBox> </Ajax: AjaxPanel> </Form> </Body> </HTML>
|
........................................ ........................................ .......
4. *. The cs code is as follows:
The Code is as follows: |
Copy code |
Using System; Using System. Collections; Using System. ComponentModel; Using System. Data; Using System. Drawing; Using System. Web; Using System. Web. SessionState; Using System. Web. UI; Using System. Web. UI. WebControls; Using System. Web. UI. HtmlControls; Using System. Data. SqlClient; Using Microsoft. Web. UI. WebControls; Using MagicAjax; Namespace treeviewDemo { /// <Summary> /// Summary of createTree. /// </Summary> Public class createTree: System. Web. UI. Page { Protected Microsoft. Web. UI. WebControls. TreeView TreeView1; Protected SqlConnection myConn; Protected SqlDataAdapter myAdapter; Protected DataSet data; Protected MagicAjax. UI. Controls. AjaxPanel Ajaxpanel1; Protected System. Web. UI. WebControls. TextBox tbNode; Protected MagicAjax. UI. Controls. AjaxPanel panel1; Protected string query; Private void Page_Load (object sender, System. EventArgs e) { If (! Page. IsPostBack) { String ConnStr = System. Configuration. ConfigurationSettings. receivettings ["connString"]; MyConn = new SqlConnection (ConnStr ); CreateDataSet (); InitTree (TreeView1.Nodes, "0 "); }
} # Code generated by region Web Form Designer Override protected void OnInit (EventArgs e) { // // CODEGEN: This call is required by the ASP. NET Web form designer. // InitializeComponent (); Base. OnInit (e ); }
/// <Summary> /// The designer supports the required methods-do not use the code editor to modify /// Content of this method. /// </Summary> Private void InitializeComponent () { This. TreeView1.SelectedIndexChange + = new Microsoft. Web. UI. WebControls. SelectEventHandler (this. TreeView1_SelectedIndexChange ); This. Load + = new System. EventHandler (this. Page_Load ); } # Endregion # Region // Store the database content in DataSet for Buffering Private DataSet CreateDataSet () { Query = "SELECT * FROM TreeViewTable "; MyAdapter = new SqlDataAdapter (query, myConn ); Data = new DataSet (); MyAdapter. Fill (data, "tree "); Return data; } // Create data from DataSet // Recursively call the display subtree from the root node Private void InitTree (TreeNodeCollection Nds, string parentId) { TreeNode tmpNd; DataRow [] rows = data. Tables [0]. Select ("ParentId = '" + parentId + "'"); Foreach (DataRow row in rows) { TmpNd = new TreeNode (); TmpNd. ID = row ["NodeId"]. ToString (); TmpNd. Text = row ["NodeName"]. ToString (); // TmpNd. NavigateUrl = row ["Url"]. ToString (); Nds. Add (tmpNd ); InitTree (tmpNd. Nodes, tmpNd. ID ); } } # Endregion Private void treeviewincluselectedindexchange (object sender, Microsoft. Web. UI. WebControls. TreeViewSelectEventArgs e) { TreeNode tn = TreeView1.GetNodeFromIndex (e. NewNode ); TbNode. Text = tn. Text; }} } |
........................................ ........................................ ....
So far, the TreeView has been loaded!
5. A problem will be found after running:
** When PostBack is enabled, the tree effect will be lost. If a viewing error occurs, you cannot access about: blank/webctrl_client/issue 0/. htc.
The problem is solved as follows:
Add in web. config
The Code is as follows: |
Copy code |
<ConfigSections> <Section name = "MicrosoftWebControls" type = "System. Configuration. NameValueSectionHandler, System, System. Configuration. NameValueSectionHandler, System, Version = 1.0.3300.0, Culture = neutral, PublicKeyToken = Taobao"/> </ConfigSections> <MicrosoftWebControls> <Add key = "CommonFiles" value = "/webctrl_client/logs 0"/> </MicrosoftWebControls> |
You can modify the htc location of the call tree.
In the preceding configuration
The Code is as follows: |
Copy code |
/Webctrl_client/route 0
|
Change
Full name
The Code is as follows: |
Copy code |
Http: // localhost/webctrl_client/route 0
|