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
|
