BelowCodeWhen a Treeview node contains a checkbox, the status of its parent and child nodes is consistent. That is, if the parent node is selected, all the child nodes are automatically selected, and vice versa. Select a child node, and select the parent node (including the ancestor node) of this Byte point ).
I also found some methods on the Internet, but I think this is a defect of the Treeview. Therefore, we should implement it inside the control, instead of attaching some external js to control the Treeview, if you have any questions, please leave a message and I will promptly correct them:
Add the following content to the backend CS file:
Protected void page_load (Object sender, eventargs E)
{
// Load sample data only once, when the page is first loaded.
If (! Ispostback)
{
Sampletreeview. Attributes. Add ("onclick", "oncheckevent ()");
}
}
Related JS:
<Script language = "JavaScript">
// Checkbox Click Event
Function oncheckevent ()
{
VaR objnode = event. srcelement;
If (objnode. tagname! = "Input" | objnode. type! = "Checkbox ")
Return;
// Obtain the current Tree node
VaR ck_id = objnode. getattribute ("ID ");
VaR node_id = ck_id.substring (0, ck_id.indexof ("checkbox") + "nodes ";
VaR curtreenode = Document. getelementbyid (node_id );
// Cascade Selection
Setchildcheckbox (curtreenode, objnode. Checked );
Setparentcheckbox (objnode );
}
// Subnode string
VaR childids = "";
// Obtain the child node ID Array
Function getchildidarray (parentnode)
{
If (parentnode = NULL)
Return;
VaR childnodes = parentnode. Children;
VaR COUNT = childnodes. length;
For (VAR I = 0; I <count; I ++)
{
VaR tmpnode = childnodes [I];
If (tmpnode. tagname = "input" & tmpnode. type = "checkbox ")
{
Childids = tmpnode. ID + ":" + childids;
}
Getchildidarray (tmpnode );
}
}
// Set the checkbox of the subnode
Function setchildcheckbox (parentnode, checked)
{
If (parentnode = NULL)
Return;
VaR childnodes = parentnode. Children;
VaR COUNT = childnodes. length;
For (VAR I = 0; I <count; I ++)
{
VaR tmpnode = childnodes [I];
If (tmpnode. tagname = "input" & tmpnode. type = "checkbox ")
{
Tmpnode. Checked = checked;
}
Setchildcheckbox (tmpnode, checked );
}
}
// Set the checkbox of the parent node
Function setparentcheckbox (childnode)
{
If (childnode = NULL)
Return;
VaR parent = childnode. parentnode;
If (parent = NULL | parent = "undefined ")
Return;
Do
{
Parent = parent. parentnode;
}
While (parent & parent. tagname! = "Div ");
If (parent = "undefined" | parent = NULL)
Return;
VaR parentid = parent. getattribute ("ID ");
VaR objparent = Document. getelementbyid (parentid );
Childids = "";
Getchildidarray (objparent );
// Determine the subnode status
Childids = childids. substring (0, childids. Length-1 );
VaR arychild = childids. Split (":");
VaR result = false;
// When the checkbox status of the subnode is true, the checkbox status of the parent node is true; otherwise, the status is false.
For (var I in arychild)
{
VaR childck = Document. getelementbyid (arychild [I]);
If (childck. Checked)
Result = true;
}
Parentid = parentid. Replace ("nodes", "checkbox ");
VaR parentck = Document. getelementbyid (parentid );
If (parentck = NULL)
Return;
If (result)
Parentck. Checked = true;
Else
Parentck. Checked = false;
Setparentcheckbox (parentck );
}
</SCRIPT>
The following is a test script for Treeview:
<Asp: Treeview id = "sampletreeview" runat = "server" showcheckboxes = All>
<Nodes>
<Asp: treenode value = "home"
Navigateurl = ""
TEXT = "home"
Target = "content"
Expanded = "true"
Selectaction = selectexpand>
<Asp: treenode value = "1"
Navigateurl = ""
TEXT = "page1"
Target = "content">
<Asp: treenode value = "2"
Navigateurl = ""
TEXT = "section 1"
Target = "content">
<Asp: treenode value = "3"
Navigateurl = ""
TEXT = "section 1"
Target = "content"/>
<Asp: treenode value = "4"
Navigateurl = ""
TEXT = "section 1"
Target = "content"/>
</ASP: treenode>
<Asp: treenode value = "5"
Navigateurl = ""
TEXT = "section 2"
Target = "content">
</ASP: treenode>
</ASP: treenode>
<Asp: treenode value = "6"
Navigateurl = ""
TEXT = "Page 2"
Target = "content">
<Asp: treenode value = "7"
Navigateurl = ""
TEXT = "section 1"
Target = "content">
</ASP: treenode>
<Asp: treenode value = "8"
Navigateurl = ""
TEXT = "section 2"
Target = "content">
</ASP: treenode>
</ASP: treenode>
</ASP: treenode>
</Nodes>
</ASP: Treeview>
The script runs normally in vs2005 and no error is reported.