TreeView的checkbox之父子联动处理方法

本文主要是介绍TreeView的checkbox之父子联动处理方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过JS前台实现，不必刷新画面

<script type ="text/javascript" >
    //将以下代码另存为JS文件，直接加载在目标文件中即可
    /**//*Helper 开始*/
    String.prototype.yy_stv_startsWith = function(s)
    {  
    /// <summary>StartsWith()</summary>

        var reg = new RegExp("^" + s);  
        return reg.test(this);
    }

    function yy_stv_addEvent(obj, evtType, fn)
    {
    /// <summary>绑定事件</summary>

        // FF
        if (obj.addEventListener)
        {
            obj.addEventListener(evtType, fn, true);
            return true;
        }
        // IE
        else if (obj.attachEvent)
        {
            var r = obj.attachEvent("on" + evtType, fn);
            return r;
        }
        else
        {
            return false;
        }   
    }
    /**//*Helper 结束*/

    /**//*联动复选框 开始*/
var yy_stv_ccTreeView_pre = new Array(); // cs中动态向其灌数据（TreeView内控件ID的前缀数组）
//调用方法：
//在页面文件中使用下面语句将树名添加到yy_stv_ccTreeView_pre数组中：
//参数中的'TreeView1'即为树名称：
yy_stv_ccTreeView_pre.push('TreeView1');

    function yy_stv_ccClickCheckbox(e)
    {
    /// <summary>单击复选框时</summary>

        var evt = e || window.event; // FF || IE
        var obj = evt.target || evt.srcElement  // FF || IE
       
        yy_stv_foreachChildCheckbox(obj);
        yy_stv_foreachParentCheckbox(obj);
    }

    function yy_stv_checkParentCheckbox(table, checked)
    {
    /// <summary>设置父复选框的状态</summary>

        var nodes = table.parentNode.parentNode.childNodes;
           
        for (var i=1; i<nodes.length; i++)
        {
            if (nodes[i] == table.parentNode)
            {
                if (typeof(nodes[i-1]) == 'undefined' || typeof(nodes[i-1].rows) == 'undefined') return;

                for (var x=0; x < nodes[i-1].rows.length; x++)
                {
                    for (var j=0; j < nodes[i-1].rows[x].cells.length; j++)
                    {
                        // debugger;
                        var chk = nodes[i-1].rows[x].cells[j].childNodes[0];
                        if (typeof(chk) != 'undefined' && chk.tagName == "INPUT" && chk.type == "checkbox")
                        {
                            chk.checked = checked;
                            yy_stv_foreachParentCheckbox(nodes[i-1]);
                            return;
                        }
                    }
                }
            }
        }
    }

    function yy_stv_foreachChildCheckbox(obj)
    {  
    /// <summary>单击父复选框时，设置其子复选框的选中状态</summary>

        var checked;
       
        if (obj.tagName == "INPUT" && obj.type == "checkbox")
        {
            checked = obj.checked;
            do
            {
                obj = obj.parentNode;
            }
            while (obj.tagName != "TABLE")
        }
       
        var nodes = obj.parentNode.childNodes;
           
        for (var i=0; i<nodes.length - 1; i++)
        {
            if (nodes[i] == obj && nodes[i + 1].tagName == "DIV")
            {
                var elements = nodes[i+1].getElementsByTagName("INPUT");
               
                for (j=0; j< elements.length; j++)
                {      
                    if (elements[j].type == 'checkbox')
                    {
                        elements[j].checked = checked;
                    }
                }   
            }
        }
    }

    function yy_stv_foreachParentCheckbox(obj)
    {   
    /// <summary>单击某一复选框时，设置其父复选框的选中状态</summary>

        var checkedNum = 0;
        var uncheckedNum = 0;
       
        if (obj.tagName == "INPUT" && obj.type == "checkbox")
        {
            do
            {
                obj = obj.parentNode;
            }
            while (obj.tagName != "TABLE")
        }
                   
        var tables = obj.parentNode.getElementsByTagName("TABLE");
        
        if (typeof(tables) == 'undefined') return;
          
        for (var i=0; i < tables.length; i++)
        {       
            for (var x=0; x < tables[i].rows.length; x++)
            {
                for (var j=0; j < tables[i].rows[x].cells.length; j++)
                {
                    var chk = tables[i].rows[x].cells[j].childNodes[0];
                    if (typeof(chk) != 'undefined' && chk.tagName == "INPUT" && chk.type == "checkbox")
                    {
                        if (chk.checked)
                            checkedNum ++;
                        else
                            uncheckedNum ++;
                    }
                }
            }
        }
       
        if (uncheckedNum == 0)
        {
            yy_stv_checkParentCheckbox(obj, true);
        }
        else
        {
            yy_stv_checkParentCheckbox(obj, false);
        }
    }

    function yy_stv_attachCheckboxClickListener()
    {
    /// <summary>监听所有联动复选框的单击事件</summary>

        var elements =  document.getElementsByTagName("INPUT");
       
        for (i=0; i< elements.length; i++)
        {      
            if (elements[i].type == 'checkbox')
            {
               for (j=0; j<yy_stv_ccTreeView_pre.length; j++)
                {
                    if (elements[i].id.yy_stv_startsWith(yy_stv_ccTreeView_pre[j]))
                    {
                        yy_stv_addEvent(elements[i], 'click', yy_stv_ccClickCheckbox);
                        break;
                    }
                }
            }
        }   
    }

    if (document.all)
    {
        window.attachEvent('onload', yy_stv_attachCheckboxClickListener);
    }
    else
    {
        window.addEventListener('load', yy_stv_attachCheckboxClickListener, false);
    }
    /**//*联动复选框 结束*/

    </script>

这篇关于TreeView的checkbox之父子联动处理方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---