TreeView的NodeCheck联动

根据TreeView2.js修改后的TreeView父节点与子节点的CheckBox联动.

思路:

当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动;父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.

js部分
<script type="text/javascript">
    //设置子节点
    function SetChildNodesCheckStatus(node,isChecked)
    {
        var childNodes = GetChildNodesDiv(node);
        if(childNodes == null)
            return;
            
        var inputs = WebForm_GetElementsByTagName(childNodes,"INPUT");
        if(inputs == null || inputs.length == 0)
            return;

        for(var i = 0; i < inputs.length; i++)
        {
            if(IsCheckBox(inputs[i]))
                inputs[i].checked = isChecked;  
        } 
    }   

    //根据子节点改变父节点
    function NodeOnChildNodeCheckedChanged(tree,node,isChecked)
    {
        if(node == null)
            return;
                 
        var childNodes = GetChildNodes(tree,node);
        
        if(childNodes == null || childNodes.length == 0)
            return;    
        
        var isAllSame = true;

        for(var i = 0; i < childNodes.length; i++)
        {
            var item = childNodes[i];
            var value = NodeGetChecked(item);

            if(isChecked != value)
            {
                isAllSame = false;
                break;
            }
        }

        var parent = GetParentNode(tree,node);
        if(isAllSame)
        {
            NodeSetChecked(node,isChecked);        
            NodeOnChildNodeCheckedChanged(tree,parent,isChecked);
        }    
        else
        {   
            if(isChecked)
            {
                NodeSetChecked(node,isChecked);  
                NodeOnChildNodeCheckedChanged(tree,parent,isChecked); 
            }
        }
    }
    //获取节点
    function GetNode(tree,element)
    {
        var id = element.id.replace(tree.id,"");   
        id = id.toLowerCase().replace(element.type,"");    
        id = tree.id + id;
        
        var node = document.getElementById(id);
        if(node == null)
            return element;
        return node;
    }

    //获取父节点
    function GetParentNode(tree,node)
    {
        var div = WebForm_GetParentByTagName(node,"DIV");
        
        var table = div.previousSibling; 
        if(table == null)
            return null;   
       
        return GetNodeInElement(tree,table);
    }

    //获取子节点
    function GetChildNodes(tree,node)
    {
        if(NodeIsLeaf(node))
            return null;
        
        var children = new Array();
        var div = GetChildNodesDiv(node);
        var index = 0;
        
        for(var i = 0; i < div.childNodes.length; i++)
        {
            var element = div.childNodes[i];        
            if(element.tagName != "TABLE")
                continue; 
            
            var child = GetNodeInElement(tree,element);
            if(child != null)
                children[index++] = child;
        }
        return children;
    }
    //是否叶子节点
    function NodeIsLeaf(node)
    {
        return !(node.tagName == "A");
    }
    //获取节点的checkBox
    function NodeGetChecked(node)
    {
        var checkbox = TV2i_NodeGetCheckBox(node);   
        return checkbox.checked;
    }
    //设置节点的checkBox
    function NodeSetChecked(node,isChecked)
    {
        var checkbox = TV2i_NodeGetCheckBox(node);
        if(checkbox != null)
         checkbox.checked = isChecked;
    }
    //是否是CheckBox事件
    function IsCheckBox(element)
    {   
        if(element == null)
            return false;
        return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");
    }
    //获取Node的DIV
    function GetChildNodesDiv(node)
    {
        if(NodeIsLeaf(node))
            return null;
            
        var childNodsDivId = node.id + "Nodes";
        return document.getElementById( childNodsDivId );
    }

    //查找 node in element
    function GetNodeInElement(tree,element)
    {
        var node = GetNodeInElementA(tree,element);
        if(node == null)
        {
            node = GetNodeInElementInput(tree,element);
        }
        return node;
    }

    //查找 "A" node 
    function GetNodeInElementA(tree,element)
    {
        var as = WebForm_GetElementsByTagName(element,"A");
        if(as== null || as.length == 0)
            return null;

        var regexp = new RegExp("^" + tree.id + "n\\d+$");

        for(var i = 0; i < as.length; i++)
        {
            if(as[i].id.match(regexp))
            {
                return as[i];
            }
        }      
        return null; 
    }

    //查找 "INPUT" node
    function GetNodeInElementInput(tree,element)
    {
        var as = WebForm_GetElementsByTagName(element,"INPUT");
        if(as== null || as.length == 0)
            return null;
            
        var regexp = new RegExp("^" + tree.id + "n\\d+");

        for(var i = 0; i < as.length; i++)
        {
            if(as[i].id.match(regexp))
            {
                return as[i];
            }
        }      
        return null; 
    }

    //获取Node的CheckBox
    function TV2i_NodeGetCheckBox(node)
    {
        if(IsCheckBox(node))
            return node;
            
        var id = node.id + "CheckBox";
        return document.getElementById(id);   
    }
    //OnTreeNodeChecked
    function OnTreeNodeChecked() 
    { 
        var element = window.event.srcElement; 
        if (!IsCheckBox(element)) 
            return;
        var isChecked = element.checked;
        var tree = document.getElementById("TreeView1")
        //联动字节点
        var node = GetNode(tree,element); 
        SetChildNodesCheckStatus(node,isChecked);
        //联动父节点
        var parent = GetParentNode(tree,node); 
        NodeOnChildNodeCheckedChanged(tree,parent,isChecked); 
    } 

    </script>

 

 

html
 <asp:TreeView ID="TreeView1" runat="server" ImageSet="Msdn" ShowCheckBoxes="All"
                            ShowLines="True" BorderWidth="0px" Height="430px" Width="250px" Font-Size="Small"
                            OnClick="OnTreeNodeChecked()">
                        </asp:TreeView>

转载于:https://www.cnblogs.com/tonyboy/archive/2008/08/12/1265955.html