根据TreeView2.js修改后的TreeView父节点与子节点的CheckBox联动.
增加CheckBox联动的情况选择:
1.单选TreeView中的任一节点
2.当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动,父节点不变;
父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.
3.当一节点CheckBox属性值改变时:子节点、父节点的CheckBox属性值跟随其改动;
父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.
javascript代码
function
OnTreeNodeChecked(id, type) {
// 获取触发事件的对象
var element = window.event.srcElement;
// 如果对象不是checkbox则不处理
if ( ! IsCheckBox(element))
return ;
// 获取checked状态
var isChecked = element.checked;
// 获取tree对象
var tree = TV2_GetTreeById(id);
// 获取element的相对结点(如果是叶结点,则就为element,否则为其<A>结点)
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) {
// 返回当前node所在的div层
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.previousSibling;
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) {
// 如果node.tagName == "A"则不处理
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, " A " );
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);
}
// 获取触发事件的对象
var element = window.event.srcElement;
// 如果对象不是checkbox则不处理
if ( ! IsCheckBox(element))
return ;
// 获取checked状态
var isChecked = element.checked;
// 获取tree对象
var tree = TV2_GetTreeById(id);
// 获取element的相对结点(如果是叶结点,则就为element,否则为其<A>结点)
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) {
// 返回当前node所在的div层
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.previousSibling;
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) {
// 如果node.tagName == "A"则不处理
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, " A " );
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代码
<
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 >
ShowLines = " True " BorderWidth = " 0px " Height = " 430px " Width = " 250px " Font - Size = " Small "
OnClick = " OnTreeNodeChecked() " >
</ asp:TreeView >