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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值