【原】父子树的选择【全选/不全选】Asp.Net 2.0 Treeview Checkbox Check/Uncheck All script

为了使您更好的理解，我简单用中文叙述一下，这个是一棵好树！

这棵树主要解决这样一个场景：我们想，如果我们选择父节点，然后要求父节点下的所有子节点都被选中，我们肯定知道如何做，就是找到父节点，然后循环选择其子节点，这个是不是很好实现啊？呵呵，我想你的回答肯定是没有问题，可是现在增加两个小小的功能：

1. 如果任何一个子节点被反选了，要求这个子节点对应的父节点也被反选了；

2. 如果所有子节点都被选中了，要求与这些子节点对应的父节点也被选中。

怎么样难度很大吧，不要怕，这篇文章就是专门来解决上述两个问题的，好了，废话少说，给大伙来点实际的。

嗯，建议大伙学点英文，^_^,下面就交个您了：

Its a very common requirement to have the parent-child check behaviour in asp.net treeview. To define the problem:
1)Check all the child nodes if the parent is checked and uncheck all child nodes if parent is unchecked ( well, this part is simple).
2)If a node at any level is checked and all its siblings are already checked then the parent node should be checked and the same should apply for the parent node(i.e., if its siblings are checked….), this should happen till the root node.
3)If a node at any level is unchecked then the parents( ma, grand ma, grand grand ma….) up to the root node must be unchecked.

Well there have been scripts on the net that only half accomplished the task(check footnotes). So I wrote the script that solves the problem completely, upto best of my knowledge. I’ve tested in IE 7 and Firefox 2.0, hope it works fine for you all.

Here’s how to implement it:

Step 1: In the page load in code behind file add an attribute to the treeview as:

 

If(!isPostBack)
{
TreeView1.Attributes.Add(”onclick”,”OnTreeClick(event)”);
}

 

The desired affect could also be accomplished by direclty adding the attribute to the treeview tag in .aspx file as: <asp:treeview onclick=”OnTreeClick(event)”… which would cause Visual Studio to display a warning but it works anyway but the codebehind way of doint it is the right way.

Step 2: Put the below script in the head section of your .aspx page:

 

function OnTreeClick(evt)
{
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var isChkBoxClick = (src.tagName.toLowerCase() == “input” && src.type == “checkbox”);
if(isChkBoxClick)
{
var parentTable = GetParentByTagName(”table”, src);
var nxtSibling = parentTable.nextSibling;
//check if nxt sibling is not null & is an element node
if(nxtSibling && nxtSibling.nodeType == 1)
{
if(nxtSibling.tagName.toLowerCase() == “div”) //if node has children
{
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}
function CheckUncheckChildren(childContainer, check)
{
var childChkBoxes = childContainer.getElementsByTagName(”input”);
var childChkBoxCount = childChkBoxes.length;
for(var i=0;i<checkBoxCount;i++)
{
childChkBoxes[i].checked = check;
}
}
function CheckUncheckParents(srcChild, check)
{
var parentDiv = GetParentByTagName(”div”, srcChild);
var parentNodeTable = parentDiv.previousSibling;
if(parentNodeTable)
{
var checkUncheckSwitch;
if(check) //checkbox checked
{
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if(isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
checkUncheckSwitch = false;
}var inpElemsInParentTable = parentNodeTable.getElementsByTagName(”input”);
if(inpElemsInParentTable.length > 0)
{
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}function AreAllSiblingsChecked(chkBox)
{
var parentDiv = GetParentByTagName(”div”, chkBox);
var childCount = parentDiv.childNodes.length;
for(var i=0;i<childCount;i++)
{
if(parentDiv.childNodes[i].nodeType == 1)
{
//check if the child node is an element node
if(parentDiv.childNodes[i].tagName.toLowerCase() == “table”)
{
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName(”input”)[0];
//if any of sibling nodes are not checked, return false
if(!prevChkBox.checked)
{
return false;
}
}
}
}
return true;
}

 

//utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj)
{
var parent = childElementObj.parentNode;
while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
{
parent = parent.parentNode;
}
return parent;
}

The script is pretty much self explanatory with function names saying it all.
Comments awaited.

Now, see the whole code,

 

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            TreeViewDemo.Attributes.Add("onclick", "OnTreeClick(event)");
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeView</title>

    <script language="javascript" type="text/javascript">
    //************************** Treeview Parent-Child check behaviour ****************************//  

   function OnTreeClick(evt)
   {
        var src = window.event != window.undefined ? window.event.srcElement : evt.target;
        var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
        if(isChkBoxClick)
        {
            var parentTable = GetParentByTagName("table", src);
            var nxtSibling = parentTable.nextSibling;
            if(nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
            {
                if(nxtSibling.tagName.toLowerCase() == "div") //if node has children
                {
                    //check or uncheck children at all levels
                    CheckUncheckChildren(parentTable.nextSibling, src.checked);
                }
            }
            //check or uncheck parents at all levels
            CheckUncheckParents(src, src.checked);
        }
   } 

   function CheckUncheckChildren(childContainer, check)
   {
      var childChkBoxes = childContainer.getElementsByTagName("input");
      var childChkBoxCount = childChkBoxes.length;
      for(var i = 0; i<childChkBoxCount; i++)
      {
        childChkBoxes[i].checked = check;
      }
   }

   function CheckUncheckParents(srcChild, check)
   {
       var parentDiv = GetParentByTagName("div", srcChild);
       var parentNodeTable = parentDiv.previousSibling;
       
       if(parentNodeTable)
        {
            var checkUncheckSwitch;
            
            if(check) //checkbox checked
            {
                var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                if(isAllSiblingsChecked)
                    checkUncheckSwitch = true;
                else    
                    return; //do not need to check parent if any child is not checked
            }
            else //checkbox unchecked
            {
                checkUncheckSwitch = false;
            }
            
            var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
            if(inpElemsInParentTable.length > 0)
            {
                var parentNodeChkBox = inpElemsInParentTable[0]; 
                parentNodeChkBox.checked = checkUncheckSwitch; 
                //do the same recursively
                CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
            }
        }
   }

   function AreAllSiblingsChecked(chkBox)
   {
     var parentDiv = GetParentByTagName("div", chkBox);
     var childCount = parentDiv.childNodes.length;
     for(var i=0; i<childCount; i++)
     {
        if(parentDiv.childNodes[i].nodeType == 1) //check if the child node is an element node
        {
            if(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
            {
               var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
              //if any of sibling nodes are not checked, return false
              if(!prevChkBox.checked) 
              {
                return false;
              } 
            }
        }
     }
     return true;
   }

   //utility function to get the container of an element by tagname
   function GetParentByTagName(parentTagName, childElementObj)
   {
      var parent = childElementObj.parentNode;
      while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
      {
         parent = parent.parentNode;
      }
    return parent;    
   }

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeViewDemo" runat="server" ShowCheckBoxes="All">
            <Nodes>
                <asp:TreeNode Text="My Computer">
                    <asp:TreeNode Text="Favorites">
                        <asp:TreeNode Text="News">
                            <asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com" />
                            <asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com" />
                        </asp:TreeNode>
                        <asp:TreeNode Text="Technology">
                            <asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com" />
                            <asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net" />
                            <asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com" />
                            <asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com" />
                        </asp:TreeNode>
                        <asp:TreeNode Text="Shopping">
                            <asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com" />
                            <asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com" />
                        </asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="City Links">
                        <asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com" />
                        <asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com" />
                    </asp:TreeNode>
                    <asp:TreeNode Text="Music Links">
                        <asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com" />
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

可以参考：http://forums.asp.net/t/1367074.aspx