vs2005 TreeView 实现父子节点,复选框联动.

实现功能,点击父节点,全选该父节点下的所有子节点,点击子节点,选择对应的父节点。子节点全不选择,则父节点也不选择。

js 代码:

var arrParents;
function OnTreeNodeChecked()
{
    var ele = event.srcElement;
    if(ele.type=='checkbox')
    {
            
              arrParents = new Array(); 
              //获取所有父节点
              GetAllParentElements(ele); 
 
                //设置子节点选种状态
                var childDivId = ele.id.replace('CheckBox','Nodes');
                var childDiv = $(childDivId);
                if(childDiv)
                {
                    var checkBoxs = childDiv.getElementsByTagName('input');
                    if(checkBoxs&&checkBoxs.length>0)
                    {
                        for(var i=0;i<checkBoxs.length;i++)
                        {
                            if(checkBoxs[i].type=='checkbox')
                            {
                                checkBoxs[i].checked = ele.checked;
                            }
                        }
                    }
                }
               
               
                //判断父节点选种状态
                for(var i=0;i<arrParents.length;i++)
                {
                    var sIsChecked = false;
                    var parentCheckBoxId = arrParents[i].id.replace('Nodes','CheckBox');
                    if(!$(parentCheckBoxId))
                    {
                        continue;
                    }
                    if(ele.checked)
                    {
                        sIsChecked = true;
                    }
                    else
                    {
                         var checkBoxs = arrParents[i].getElementsByTagName('input');
                         if(checkBoxs&&checkBoxs.length>0)
                         {
                            for(var j=0;j<checkBoxs.length;j++)
                            {
                               
                                if(checkBoxs[j].type=='checkbox'&&checkBoxs[j].checked)
                                {      
                                       sIsChecked = true;
                                       break;
                                }
                            }
                         } 
                       
                    }
                    $(parentCheckBoxId).checked = sIsChecked;
                } 
    }
}


function GetAllParentElements(sControl)
{
    if(!sControl)
    {
        return null;
    }
    if(sControl.id=='TreeView1')
    {   
        return;
    } 
    var parentControl = GetParentByTagName(sControl,'DIV');
    if(parentControl)
    {
        arrParents.push(parentControl);
        GetAllParentElements(parentControl);
    }
}


function GetParentByTagName(element, tagName) {
    var parent = element.parentNode;
    var upperTagName = tagName.toUpperCase();
    while (parent && (parent.tagName.toUpperCase() != upperTagName)) {
        parent = parent.parentNode ? parent.parentNode : parent.parentElement;
    }
    return parent;
}

在TreeView 添加 onclick="OnTreeNodeChecked()"

posted on 2010-06-06 21:55  tigerhuolh  阅读(214)  评论(0编辑  收藏  举报

导航