技术开发 频道

扩展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); } /**//*行的指定复选框选中时改变行的样式 结束*/
0
相关文章