Use js scripts to control NodeCheck implementation code of treeview under asp.net

Source: Internet
Author: User

Options for adding CheckBox Association:
1. Select any node in the TreeView
2. When the value of the CheckBox attribute of a node changes: the value of the CheckBox attribute of the child node follows the change, and the value of the parent node remains unchanged;
The value of the CheckBox attribute of all child nodes of the parent node is false only when it is false. The value of the CheckBox attribute of one child node is true.
3. When the CheckBox attribute value of a node changes: the value of the CheckBox attribute of the child node and the parent node follows the change;
The value of the CheckBox attribute of all child nodes of the parent node is false only when it is false. The value of the CheckBox attribute of one child node is true.
Javascript code
Copy codeThe Code is as follows:
Function OnTreeNodeChecked (id, type ){
// Obtain the trigger event object
Var element = window. event. srcElement;
// Do not process the object if it is not checkbox
If (! IsCheckBox (element ))
Return;
// Get the checked status
Var isChecked = element. checked;
// Obtain the tree object
Var tree = TV2_GetTreeById (id );
// Obtain the relative node of an element (if it is A leaf node, it is an element; otherwise, it is the <A> node)
Var node = TV2_GetNode (tree, element );
Switch (type ){
Case "1 ":
SetNodesUnChecked (tree );
Element. checked = true;
Break;
Case "2 ":
TV2_SetChildNodesCheckStatus (node, isChecked );
Break;
Case "3 ":
TV2_SetChildNodesCheckStatus (node, isChecked );
Var parent = TV2_GetParentNode (tree, node );
TV2_NodeOnChildNodeCheckedChanged (tree, parent, isChecked );
}
}
// Set all nodes checkbox nochecked
Function SetNodesUnChecked (TreeNode ){
Var inputs = WebForm_GetElementsByTagName (TreeNode, "INPUT ");
If (inputs = null | inputs. length = 0)
Return;
For (var I = 0; I <inputs. length; I ++ ){
If (IsCheckBox (inputs [I])
Inputs [I]. checked = false;
}
}
// Set child nodes checkbox status
Function TV2_SetChildNodesCheckStatus (node, isChecked ){
// Return the div layer of the current node
Var childNodes = TV2i_GetChildNodesDiv (node );
If (childNodes = null)
Return;
Var inputs = WebForm_GetElementsByTagName (childNodes, "INPUT ");
If (inputs = null | inputs. length = 0)
Return;
For (var I = 0; I <inputs. length; I ++ ){
If (IsCheckBox (inputs [I])
Inputs [I]. checked = isChecked;
}
}
// Change parent node checkbox status after child node changed
Function TV2_NodeOnChildNodeCheckedChanged (tree, node, isChecked ){
If (node = null)
Return;
Var childNodes = TV2_GetChildNodes (tree, node );
If (childNodes = null | childNodes. length = 0)
Return;
Var isAllSame = true;
For (var I = 0; I <childNodes. length; I ++ ){
Var item = childNodes [I];
Var value = TV2_NodeGetChecked (item );
If (isChecked! = Value ){
IsAllSame = false;
Break;
}
}
Var parent = TV2_GetParentNode (tree, node );
If (isAllSame ){
TV2_NodeSetChecked (node, isChecked );
TV2_NodeOnChildNodeCheckedChanged (tree, parent, isChecked );
}
Else {
TV2_NodeSetChecked (node, true );
TV2_NodeOnChildNodeCheckedChanged (tree, parent, true );
}
}
// Get node relative element (etc. checkbox)
Function TV2_GetNode (tree, element ){
Var id = element. id. replace (tree. id ,"");
Id = id. toLowerCase (). replace (element. type ,"");
Id = tree. id + id;
Var node = document. getElementById (id );
If (node = null) // leaf node, no "A" node
Return element;
Return node;
}
// Get parent node
Function TV2_GetParentNode (tree, node ){
Var div = WebForm_GetParentByTagName (node, "DIV ");
// The structure of node: <table> information of node </table> <div> child nodes </div>
Var table = div. previussibling;
If (table = null)
Return null;
Return TV2i_GetNodeInElement (tree, table );
}
// Get child nodes array
Function TV2_GetChildNodes (tree, node ){
If (TV2_NodeIsLeaf (node ))
Return null;
Var children = new Array ();
Var div = TV2i_GetChildNodesDiv (node );
Var index = 0;
For (var I = 0; I <div. childNodes. length; I ++ ){
Var element = div. childNodes [I];
If (element. tagName! = "TABLE ")
Continue;
Var child = TV2i_GetNodeInElement (tree, element );
If (child! = Null)
Children [index ++] = child;
}
Return children;
}
Function TV2_NodeIsLeaf (node ){
Return! (Node. tagName = "A"); // Todo
}
Function TV2_NodeGetChecked (node ){
Var checkbox = TV2i_NodeGetCheckBox (node );
Return checkbox. checked;
}
Function TV2_NodeSetChecked (node, isChecked ){
Var checkbox = TV2i_NodeGetCheckBox (node );
If (checkbox! = Null)
Checkbox. checked = isChecked;
}
Function IsCheckBox (element ){
If (element = null)
Return false;
Return (element. tagName = "INPUT" & element. type. toLowerCase () = "checkbox ");
}
// Get tree
Function TV2_GetTreeById (id ){
Return document. getElementById (id );
}
//////////////////////////////////////// //////////////////////////////////////// //////////////
// Private mothods, with TV2i _ prefix
//////////////////////////////////////// //////////////////////////////////////// //////////////
// Get div contains child nodes
Function TV2i_GetChildNodesDiv (node ){
// If node. tagName = "A" is not processed
If (TV2_NodeIsLeaf (node ))
Return null;
Var childNodsDivId = node. id + "Nodes ";
Return document. getElementById (childNodsDivId );
}
// Find node in element
Function TV2i_GetNodeInElement (tree, element ){
Var node = TV2i_GetNodeInElementA (tree, element );
If (node = null ){
Node = TV2i_GetNodeInElementInput (tree, element );
}
Return node;
}
// Find "A" node
Function TV2i_GetNodeInElementA (tree, element ){
Var as = WebForm_GetElementsByTagName (element, "");
If (as = null | as. length = 0)
Return null;
Var regexp = new RegExp ("^" + tree. id + "n \ d + $ ");
For (var I = 0; I <as. length; I ++ ){
If (as [I]. id. match (regexp )){
Return as [I];
}
}
Return null;
}
// Find "INPUT" node
Function TV2i_GetNodeInElementInput (tree, element ){
Var as = WebForm_GetElementsByTagName (element, "INPUT ");
If (as = null | as. length = 0)
Return null;
Var regexp = new RegExp ("^" + tree. id + "n \ d + ");
For (var I = 0; I <as. length; I ++ ){
If (as [I]. id. match (regexp )){
Return as [I];
}
}
Return null;
}
// Get checkbox of node
Function TV2i_NodeGetCheckBox (node ){
If (IsCheckBox (node ))
Return node;
Var id = node. id + "CheckBox ";
Return document. getElementById (id );
}

Html code
Copy codeThe Code is as follows:
<Asp: TreeView ID = "TreeView1" runat = "server" ImageSet = "Msdn" ShowCheckBoxes = "All"
ShowLines = "True" BorderWidth = "0px" Height = "430px" Width = "250px" Font-Size = "Small"
OnClick = "OnTreeNodeChecked ()">
</Asp: TreeView>

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.