In javascript, The TreeView does not show new program code.

Source: Internet
Author: User

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

Related Article

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.