[导入]TreeView的级联选择（下）

书接上回。

选中父节点要比选中子节点稍微复杂一些。

1.如果这个节点原来的状态为未选中，现在选中了，那简单了，找到它的父节点，选中父节点，继续以父节点为起点，继续向上找，直到到达根节点。

2.如果这个节点原来的状态为选中，现在不选了，那么比较麻烦。

   2.1如果这个节点的兄弟节点中有选中的，那么父节点的选中与否，就可以用兄弟节点为基础来做了。

   2.2如果这个节点的所有兄弟节点都没有选中，那么父节点应该是不选的，可是爷爷呢？爷爷的状态应该和叔叔伯伯节点的状态来确定。

从上面来看递归是少不了的了。

完整版的代码如下：

    //选中父节点
        function SelectAllParent(obj,x)
        {
            //如果传过来的CheckBox选中了
            if(obj.checked==true)
            {
                //获得某个CheckBox所在的div
                var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
                //如果没有这个div，那么意味着到根节点了。
                if(parentDiv==null)
                {
                    return;
                }
                //获得这个div的父节点的CheckBox的id
                var parentId=parentDiv.id.replace("Nodes","CheckBox");
                //获得父节点的CheckBox
                var temp=document.getElementById(parentId);
                //如果有父节点，那么不是根节点
                if(temp!=null)
                {
                    //设置父节点的CheckBox为选中
                    document.getElementById(parentId).checked=true;
                    //继续以这个父节点找爷爷节点。
                    SelectAllParent(document.getElementById(parentId),x);
                }
            }
            else
            {
                //设置一个变量
                var result=false;
                //还是获取这个CheckBox的父div
                var parentDiv=obj.parentElement.parentElement.parentElement.parentElement.parentElement;
                var items=parentDiv.childNodes;
                //遍历div中的每个table
                for(var i=0;i<items.length;i++)
                {
                    if(items[i].tagName=='TABLE')
                    {
                        //找到装有CheckBox的tr
                        var tr=items[i].childNodes[0].childNodes[parseInt(x)];
                        //找到td集合
                        var tds=tr.childNodes;
                        //找到最后一个td
                        var lastTd=tds[tds.length-1];
                        //获得最后一个td中的第一个元素，就是checkbox
                        var input=lastTd.childNodes[0].id;
                        //如果其中有一个兄弟节点选中了
                        if(document.getElementById(input).checked==true)
                        {
                            //那么结果为真
                            result=true;
                            //那么以这个CheckBox继续向上遍历
                            SelectAllParent(document.getElementById(input),x);
                            return;
                        }
                    }
                }
                //如果循环都跑完了，result依然false，
                //意味着这个节点的父节点的选中状态应该为false
                document.getElementById(parentDiv.id.replace("Nodes","CheckBox")).checked=result;
                //接着用这个父节点，去找爷爷节点。
                SelectAllParent(document.getElementById(parentDiv.id.replace("Nodes","CheckBox")),x);
               
            }
        }
   
  //看是否应用了样式
  //如果没有应用样式，table中应该只有1行
  //如果应用了样式，table中应该有3行
  //CheckBox一般会在第二行中出现
        function HasStyle(tree)
        {
            var x=document.getElementById(tree).childNodes[0].childNodes[0].childNodes.length;
            return parseInt(x-1);
        }
       
        //选中子节点
        //obj为某个点中的CheckBox
        //x为0：没有应用样式，1：应用了样式
        function SelectAllChild(obj,x)
        {
            //获得子节点的id
            var childrenId=obj.id.replace("CheckBox","Nodes");
            //获得子节点
            var temp=document.getElementById(childrenId);
            //如果有子节点
            if(temp!=null)
            {
                //获取其中的子节点，目的是找那些TABLE
                //因为在Table中有CheckBox
                var items=document.getElementById(childrenId).childNodes;

                var count=items.length;
               
                for(var i=0;i<count;i++)
                {
                    if(items[i].tagName=='TABLE')
                    {
                        //找到tr
                        var tr=items[i].childNodes[0].childNodes[parseInt(x)];
                        //找到td集合
                        var tds=tr.childNodes;
                        //找到最后一个td
                        var lastTd=tds[tds.length-1];
                        //获得最后一个td中的第一个元素，就是checkbox
                        var input=lastTd.childNodes[0].id;
                        //设置这个checkbox的状态为父节点的状态
                        document.getElementById(input).checked=obj.checked;
                        //接着看这个子节点还有没有孙子节点。
                        SelectAllChild(document.getElementById(input),parseInt(x));
                    }
                }
            }
        }
        //遍历每个CheckBox，给它们加上onclick处理过程

        function AutoSelectHandle(treeID)
        {
            var x=HasStyle(treeID);
            //获得所有的input标记
            var objs = document.getElementsByTagName("input");
            //遍历
            for(var i=0;i<objs.length;i++)
            {
                //如果是CheckBox
                if(objs[i].type=='checkbox')
                {
                    var obj=objs[i];
                    //如果CheckBox的id中包括TreeView在客户端的id
                    //那么意味着这个CheckBox是TreeView中的CheckBox
                    if(obj.id.indexOf(treeID)!=-1)
                    {
                        //注册事件处理过程
                        objs[i].onclick=function()
                        {
                            //选中子节点
                            SelectAllChild(this,parseInt(x));
                            //选中父节点
                            SelectAllParent(this,x);
                        };
                    }
                }
            }
        }

 

在TreeView的下面加一段：

    <script type="text/javascript" language="javascript">
          AutoSelectHandle("<%=TreeView1.ClientID%>");
       </script>

 

打完收工，解放土鳖。

 

 

文章来源:http://blog.sina.com.cn/s/blog_49458c270100c28v.html