TreeView的NodeCheck联动
根据TreeView2.js修改后的TreeView父节点与子节点的CheckBox联动.
思路:
当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动;父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
//设置子节点
function SetChildNodesCheckStatus(node,isChecked)
{
var childNodes = 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;
}
}
//根据子节点改变父节点
function NodeOnChildNodeCheckedChanged(tree,node,isChecked)
{
if(node == null)
return;
var childNodes = 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 = NodeGetChecked(item);
if(isChecked != value)
{
isAllSame = false;
break;
}
}
var parent = GetParentNode(tree,node);
if(isAllSame)
{
NodeSetChecked(node,isChecked);
NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
else
{
if(isChecked)
{
NodeSetChecked(node,isChecked);
NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
}
}
//获取节点
function 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)
return element;
return node;
}
//获取父节点
function GetParentNode(tree,node)
{
var div = WebForm_GetParentByTagName(node,"DIV");
var table = div.previousSibling;
if(table == null)
return null;
return GetNodeInElement(tree,table);
}
//获取子节点
function GetChildNodes(tree,node)
{
if(NodeIsLeaf(node))
return null;
var children = new Array();
var div = 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 = GetNodeInElement(tree,element);
if(child != null)
children[index++] = child;
}
return children;
}
//是否叶子节点
function NodeIsLeaf(node)
{
return !(node.tagName == "A");
}
//获取节点的checkBox
function NodeGetChecked(node)
{
var checkbox = TV2i_NodeGetCheckBox(node);
return checkbox.checked;
}
//设置节点的checkBox
function NodeSetChecked(node,isChecked)
{
var checkbox = TV2i_NodeGetCheckBox(node);
if(checkbox != null)
checkbox.checked = isChecked;
}
//是否是CheckBox事件
function IsCheckBox(element)
{
if(element == null)
return false;
return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");
}
//获取Node的DIV
function GetChildNodesDiv(node)
{
if(NodeIsLeaf(node))
return null;
var childNodsDivId = node.id + "Nodes";
return document.getElementById( childNodsDivId );
}
//查找 node in element
function GetNodeInElement(tree,element)
{
var node = GetNodeInElementA(tree,element);
if(node == null)
{
node = GetNodeInElementInput(tree,element);
}
return node;
}
//查找 "A" node
function 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;
}
//查找 "INPUT" node
function 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;
}
//获取Node的CheckBox
function TV2i_NodeGetCheckBox(node)
{
if(IsCheckBox(node))
return node;
var id = node.id + "CheckBox";
return document.getElementById(id);
}
//OnTreeNodeChecked
function OnTreeNodeChecked()
{
var element = window.event.srcElement;
if (!IsCheckBox(element))
return;
var isChecked = element.checked;
var tree = document.getElementById("TreeView1")
//联动字节点
var node = GetNode(tree,element);
SetChildNodesCheckStatus(node,isChecked);
//联动父节点
var parent = GetParentNode(tree,node);
NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
}
</script>
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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>