这几天试用了下vs2008,实现的功能是:
1.当选勾选的节点下有子节点,所有子结点跟随勾选结点的Checked状态改变.
2.当某结点选中,假如其存在父结点,则父结点也选中。父结点若还有父结点,则其父结点也选中。。以此类推。
3.当所有同级结点皆未选中,则父结点Checked=false
Code
<script language="javascript"type="text/javascript">
//TreeView onclick 触发事件
function client_OnTreeNodeChecked(event)
{
//得到当前所 Click 的对象
var objNode;
if(!public_IsObjectNull(event.srcElement))
{
//IE
objNode = event.srcElement;
}
else
{
//FF
objNode = event.target;
}
//判断是否 Click 的 CheckBox
if(!public_IsCheckBox(objNode))
return;
var objCheckBox = objNode;
//根据CheckBox状态进行相应处理
if(objCheckBox.checked==true)
{
//递归选中父节点的 CheckBox
setParentChecked(objCheckBox);
//递归选中所有的子节点
setChildChecked(objCheckBox);
}
else
{
//递归取消选中所有的子节点
setChildUnChecked(objCheckBox);
//递归取消选中父节点(如果当前节点的所有其他同级节点也都未被选中).
setParentUnChecked(objCheckBox);
}
}
//判断对象是否为空
function public_IsObjectNull(element)
{
if(element==null || element == "undefined")
return true;
else
return false;
}
//判断对象是否为 CheckBox
function public_IsCheckBox(element)
{
if(public_IsObjectNull(element))
return false;
if(element.tagName!="INPUT" || element.type!="checkbox")
return false;
else
return true;
}
//得到包含所有子节点的 Node(Div 对象)
function public_CheckBox2Node(element)
{
var objID = element.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("CheckBox"));
return document.getElementById(objID+"Nodes");
}
//得到父节点的 CheckBox
function public_Node2CheckBox(element)
{
var objID = element.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("Nodes"));
return document.getElementById(objID+"CheckBox");
}
//得到本节点所在的 Node(Div 对象)
function public_GetParentNode(element)
{
var parent = element.parentNode;
var upperTagName = "DIV";
//如果这个元素还不是想要的 tag 就继续上溯
while (parent && (parent.tagName.toUpperCase() != upperTagName))
{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
//设置节点的父节点 Checked
function setParentChecked(currCheckBox)
{
var objParentNode= public_GetParentNode(currCheckBox);
if(public_IsObjectNull(objParentNode))
return;
var objParentCheckBox = public_Node2CheckBox(objParentNode);
if(!public_IsCheckBox(objParentCheckBox))
return;
objParentCheckBox.checked = true;
setParentChecked(objParentCheckBox);
}
//当父节点的所有子节点都未被选中时,设置父节点 UnChecked
function setParentUnChecked(currCheckBox)
{
var objParentNode= public_GetParentNode(currCheckBox);
if(public_IsObjectNull(objParentNode))
return;
//判断 currCheckBox 的同级节点是否都为 UnChecked.
if(!IsMyChildCheckBoxsUnChecked(objParentNode))
return;
var objParentCheckBox = public_Node2CheckBox(objParentNode);
if(!public_IsCheckBox(objParentCheckBox))
return;
objParentCheckBox.checked = false;
setParentUnChecked(objParentCheckBox);
}
//设置节点的子节点 UnChecked
function setChildUnChecked(currObj)
{
var currNode;
if(public_IsCheckBox(currObj))
{
currNode = public_CheckBox2Node(currObj);
if (public_IsObjectNull(currNode))
return;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox))
{
childCheckBox.checked = false;
}
setChildUnChecked(childCheckBox);
}
}
//设置节点的子节点 Checked
function setChildChecked(currObj)
{
var currNode;
if(public_IsCheckBox(currObj))
{
currNode = public_CheckBox2Node(currObj);
if (public_IsObjectNull(currNode))
return;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox))
{
childCheckBox.checked = true;
}
setChildChecked(childCheckBox);
}
}
//判断该节点的子节点是否都为 UnChecked
function IsMyChildCheckBoxsUnChecked(currObj)
{
var retVal = true;
var currNode;
if(public_IsCheckBox(currObj) && currObj.checked == true)
{
return false;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
if (retVal == false)
break;
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox) && childCheckBox.checked == true)
{
retVal = false;
return retVal;
}
else
retVal = IsMyChildCheckBoxsUnChecked(childCheckBox);
}
return retVal;
}
</script>
<script language="javascript"type="text/javascript">
//TreeView onclick 触发事件
function client_OnTreeNodeChecked(event)
{
//得到当前所 Click 的对象
var objNode;
if(!public_IsObjectNull(event.srcElement))
{
//IE
objNode = event.srcElement;
}
else
{
//FF
objNode = event.target;
}
//判断是否 Click 的 CheckBox
if(!public_IsCheckBox(objNode))
return;
var objCheckBox = objNode;
//根据CheckBox状态进行相应处理
if(objCheckBox.checked==true)
{
//递归选中父节点的 CheckBox
setParentChecked(objCheckBox);
//递归选中所有的子节点
setChildChecked(objCheckBox);
}
else
{
//递归取消选中所有的子节点
setChildUnChecked(objCheckBox);
//递归取消选中父节点(如果当前节点的所有其他同级节点也都未被选中).
setParentUnChecked(objCheckBox);
}
}
//判断对象是否为空
function public_IsObjectNull(element)
{
if(element==null || element == "undefined")
return true;
else
return false;
}
//判断对象是否为 CheckBox
function public_IsCheckBox(element)
{
if(public_IsObjectNull(element))
return false;
if(element.tagName!="INPUT" || element.type!="checkbox")
return false;
else
return true;
}
//得到包含所有子节点的 Node(Div 对象)
function public_CheckBox2Node(element)
{
var objID = element.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("CheckBox"));
return document.getElementById(objID+"Nodes");
}
//得到父节点的 CheckBox
function public_Node2CheckBox(element)
{
var objID = element.getAttribute("ID");
objID = objID.substring(0,objID.indexOf("Nodes"));
return document.getElementById(objID+"CheckBox");
}
//得到本节点所在的 Node(Div 对象)
function public_GetParentNode(element)
{
var parent = element.parentNode;
var upperTagName = "DIV";
//如果这个元素还不是想要的 tag 就继续上溯
while (parent && (parent.tagName.toUpperCase() != upperTagName))
{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
//设置节点的父节点 Checked
function setParentChecked(currCheckBox)
{
var objParentNode= public_GetParentNode(currCheckBox);
if(public_IsObjectNull(objParentNode))
return;
var objParentCheckBox = public_Node2CheckBox(objParentNode);
if(!public_IsCheckBox(objParentCheckBox))
return;
objParentCheckBox.checked = true;
setParentChecked(objParentCheckBox);
}
//当父节点的所有子节点都未被选中时,设置父节点 UnChecked
function setParentUnChecked(currCheckBox)
{
var objParentNode= public_GetParentNode(currCheckBox);
if(public_IsObjectNull(objParentNode))
return;
//判断 currCheckBox 的同级节点是否都为 UnChecked.
if(!IsMyChildCheckBoxsUnChecked(objParentNode))
return;
var objParentCheckBox = public_Node2CheckBox(objParentNode);
if(!public_IsCheckBox(objParentCheckBox))
return;
objParentCheckBox.checked = false;
setParentUnChecked(objParentCheckBox);
}
//设置节点的子节点 UnChecked
function setChildUnChecked(currObj)
{
var currNode;
if(public_IsCheckBox(currObj))
{
currNode = public_CheckBox2Node(currObj);
if (public_IsObjectNull(currNode))
return;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox))
{
childCheckBox.checked = false;
}
setChildUnChecked(childCheckBox);
}
}
//设置节点的子节点 Checked
function setChildChecked(currObj)
{
var currNode;
if(public_IsCheckBox(currObj))
{
currNode = public_CheckBox2Node(currObj);
if (public_IsObjectNull(currNode))
return;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox))
{
childCheckBox.checked = true;
}
setChildChecked(childCheckBox);
}
}
//判断该节点的子节点是否都为 UnChecked
function IsMyChildCheckBoxsUnChecked(currObj)
{
var retVal = true;
var currNode;
if(public_IsCheckBox(currObj) && currObj.checked == true)
{
return false;
}
else
currNode = currObj;
var currNodeChilds = currNode.childNodes;
var count = currNodeChilds.length;
for(var i=0;i<count;i++)
{
if (retVal == false)
break;
var childCheckBox = currNodeChilds[i];
if(public_IsCheckBox(childCheckBox) && childCheckBox.checked == true)
{
retVal = false;
return retVal;
}
else
retVal = IsMyChildCheckBoxsUnChecked(childCheckBox);
}
return retVal;
}
</script>
Code
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" Style="left: 24px;
position: relative; top: 56px" onclick="client_OnTreeNodeChecked(event);"
ShowLines="True" meta:resourcekey="TreeViewModulesResource1" ImageSet="BulletedList4"
ExpandDepth="0" Target="middle">
<Nodes>
<asp:TreeNode Text="行政" Value="行政">
<asp:TreeNode Text="张三" Value="张三"></asp:TreeNode>
<asp:TreeNode Text="李四" Value="李四"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="财务" Value="财务">
<asp:TreeNode Text="王五" Value="王五"></asp:TreeNode>
<asp:TreeNode Text="甲6" Value="甲6"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Love" Value="Love">
<asp:TreeNode Text="小甘" Value="小甘"></asp:TreeNode>
<asp:TreeNode Text="." Value="."></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" Style="left: 24px;
position: relative; top: 56px" onclick="client_OnTreeNodeChecked(event);"
ShowLines="True" meta:resourcekey="TreeViewModulesResource1" ImageSet="BulletedList4"
ExpandDepth="0" Target="middle">
<Nodes>
<asp:TreeNode Text="行政" Value="行政">
<asp:TreeNode Text="张三" Value="张三"></asp:TreeNode>
<asp:TreeNode Text="李四" Value="李四"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="财务" Value="财务">
<asp:TreeNode Text="王五" Value="王五"></asp:TreeNode>
<asp:TreeNode Text="甲6" Value="甲6"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="Love" Value="Love">
<asp:TreeNode Text="小甘" Value="小甘"></asp:TreeNode>
<asp:TreeNode Text="." Value="."></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>