TreeView関連

• TreeViewにチェックボックスを表示して、親がクリックされたら子供にもチェックが入るのをJavaScript使ってごりごり。どこかの海外のサイトのをそのまま参考にして若干手を加えた。
  • まずTree部分。ShowCheckBoxes="All"のところがチェックボックス表示のとこ。

<asp:TreeView ID="TreeView1" ExpandDepth="0" Runat="Server"
 BackColor="White" ShowCheckBoxes="All" onclick="OnTreeClick(event)">
  <Nodes>
    <asp:TreeNode Text="AAA"  SelectAction="None">
      <asp:TreeNode Text="BBB" SelectAction="None">
        <asp:TreeNode Text="CCC" SelectAction="None" />
      </asp:TreeNode>     
  </Nodes>
</asp:TreeView>

• • JavaScript部分

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
                if(src.checked) {
                    CheckUncheckChildren(parentTable.nextSibling, src.checked);
                }
            }
        }
    }
}

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

//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;
}