现在的位置: 首页 > 综合 > 正文

扩展TreeView控件(1) – 联动复选框(复选框的全选和取消全选)

2012年05月14日 ⁄ 综合 ⁄ 共 4736字 ⁄ 字号 评论关闭
TreeView既强大又好用。为了让它更强大、更好用,我们来写一个继承自TreeView的控件。
[源码下载]

扩展TreeView控件(1) - 联动复选框(复选框的全选和取消全选)

作者:webabcd

介绍
扩展TreeView控件:
联动复选框(复选框的全选和取消全选)。选中指定的父复选框,则设置其所有子复选框为选中状态;取消选中指定的父复选框,则设置其所有子复选框为取消选中状态。如果某父复选框的所有子复选框为均选中状态,则设置该父复选框为选中状态;如果某复选框的所有子复选框至少有一个为取消选中状态,则设置该父复选框为取消选中状态

使用方法(设置属性):
AllowCascadeCheckbox - 是否启用联动复选框功能

关键代码
相关的js

//----------------------------
//
 http://webabcd.cnblogs.com/
//
----------------------------

/*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的前缀数组)

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;
                }

            }

        }

    }
    
}


抱歉!评论已关闭.