扩展GridView控件 - 行的指定复选框选中时改变行的样式

【IT168技术文档】


  扩展GridView控件：
  行的指定复选框选中的时候改变该行的样式，行的指定复选框取消选中的时候恢复该行的样式

  使用方法（设置CheckedRowCssClass复合属性）：
  CheckBoxID - 模板列中 数据行的复选框ID
  CssClass - 选中的行的 CSS 类名


  关键代码
  js

/*行的指定复选框选中时改变行的样式 开始*/
var yy_sgv_crGridView_pre = new Array(); // cs中动态向其灌数据（GridView内控件ID的前缀数组）
var yy_sgv_crCheckbox_post = new Array(); // cs中动态向其灌数据（数据行的复选框ID的后缀数组）
var yy_sgv_crClassName = ''; // cs中动态向其灌数据（css 类名）

var yy_sgv_crCheckbox = new Array(); // Checkbox数组
var yy_sgv_crCssClass = new Array(); // css 类名数组

function yy_sgv_changeCheckedRowCssClass(obj, cssClass, enableChangeMouseOverCssClass)
{
/// <summary>数据行的指定复选框选中行时改变行的样式</summary>

if (yy_sgv_crClassName == '') return;
var objChk = obj;
var objTr = obj;
do
{
objTr = objTr.parentNode;
}
while (objTr.tagName != "TR")
if (objChk.checked)
{
yy_sgv_crCheckbox.push(objChk.id);
if (yy_sgv_originalCssClassName != '' && enableChangeMouseOverCssClass)
{
yy_sgv_crCssClass.push(yy_sgv_originalCssClassName);
}
else
{
yy_sgv_crCssClass.push(objTr.className);
}
objTr.className = cssClass;
if (enableChangeMouseOverCssClass)
yy_sgv_originalCssClassName = cssClass;
}
else
{
for (var i=0; i<yy_sgv_crCheckbox.length; i++)
{
if (yy_sgv_crCheckbox[i] == objChk.id)
{
objTr.className = yy_sgv_originalCssClassName = yy_sgv_crCssClass[i];
yy_sgv_crCheckbox.splice(i, 1);
yy_sgv_crCssClass.splice(i, 1);
break;
}
}
}
}
function yy_sgv_crCheck(e)
{
/// <summary>单击数据行的复选框时</summary>

var evt = e || window.event; // FF || IE
    var obj = evt.target || evt.srcElement  // FF || IE

yy_sgv_changeCheckedRowCssClass(obj, yy_sgv_crClassName, true)
}
function yy_sgv_crListener()
{
/// <summary>监听所有数据行的复选框的单击事件</summary>

var elements =  document.getElementsByTagName("INPUT");
for (i=0; i< elements.length; i++)
{
if (elements[i].type == 'checkbox')
{
for (j=0; j<yy_sgv_crGridView_pre.length; j++)
{
if (elements[i].id.yy_sgv_startsWith(yy_sgv_crGridView_pre[j])
&& elements[i].id.yy_sgv_endsWith(yy_sgv_crCheckbox_post[j]))
{
yy_sgv_addEvent(elements[i], 'click', yy_sgv_crCheck);
break;
}
}
}
}
}
if (document.all)
{
window.attachEvent('onload', yy_sgv_crListener)
}
else
{
window.addEventListener('load', yy_sgv_crListener, false);
}
/**//*行的指定复选框选中时改变行的样式 结束*/