GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]
作者：webabcd
/*正式版的实现 开始*/
介绍
扩展GridView控件：
行的指定复选框选中的时候改变该行的样式，行的指定复选框取消选中的时候恢复该行的样式
使用方法（设置CheckedRowCssClass复合属性）：
CheckBoxID - 模板列中 数据行的复选框ID
CssClass - 选中的行的 CSS 类名
关键代码
js
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
namespace YYControls.SmartGridViewFunction
{
/// <summary>
/// 扩展功能：行的指定复选框选中时改变行的样式
/// </summary>
public
class CheckedRowCssClassFunction : ExtendFunction
{
/// <summary>
/// 构造函数
/// </summary>
public CheckedRowCssClassFunction()
:
base()
{
}
/// <summary>
/// 构造函数
/// </summary>
/// <param name="sgv">SmartGridView对象</param>
public CheckedRowCssClassFunction(SmartGridView sgv)
:
base(sgv)
{
}
/// <summary>
/// 扩展功能的实现
/// </summary>
protected
override
void Execute()
{
this._sgv.PreRender +=
new EventHandler(_sgv_PreRender);
}
/// <summary>
/// SmartGridView的PreRender事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void _sgv_PreRender(
object sender, EventArgs e)
{
// 构造向数组中添加成员的脚本
string scriptString = "";
scriptString += String.Format(
"yy_sgv_crGridView_pre.push('{0}');", Helper.Common.GetChildControlPrefix(
this._sgv));
scriptString += String.Format(
"yy_sgv_crCheckbox_post.push('{0}');",
this._sgv.CheckedRowCssClass.CheckBoxID);
scriptString += String.Format(
"yy_sgv_crClassName = '{0}';",
this._sgv.CheckedRowCssClass.CssClass);
// 注册向数组中添加成员的脚本
if (!
this._sgv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format(
"yy_sgv_checkedRowCssClass_{0}",
this._sgv.ClientID)))
{
this._sgv.Page.ClientScript.RegisterClientScriptBlock
(
this._sgv.GetType(),
String.Format(
"yy_sgv_checkedRowCssClass_{0}",
this._sgv.ClientID),
scriptString,
true
);
}
}
}
}
/*正式版的实现 结束*/
/*测试版的实现 开始*/
using System;
using System.Collections.Generic;
using System.Text;
using System.ComponentModel;
namespace YYControls.SmartGridView
{
/// <summary>
/// 通过行的CheckBox的选中与否来修改行的样式
/// 实体类
/// </summary>
[TypeConverter(
typeof(ExpandableObjectConverter))]
public
class ChangeRowCSSByCheckBox
{
private
string _checkBoxID;
/// <summary>
/// 根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID
/// </summary>
[
Description(
"根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID"),
Category(
"扩展"),
DefaultValue(""),
NotifyParentProperty(
true)
]
public
string CheckBoxID
{
get {
return _checkBoxID; }
set { _checkBoxID = value; }
}
private
string _cssClassRowSelected;
/// <summary>
/// 选中行的样式的 CSS 类名
/// </summary>
[
Description(
"选中行的样式的 CSS 类名"),
Category(
"扩展"),
DefaultValue(""),
NotifyParentProperty(
true)
]
public
string CssClassRowSelected
{
get {
return _cssClassRowSelected; }
set { _cssClassRowSelected = value; }
}
/// <summary>
/// ToString()
/// </summary>
/// <returns></returns>
public
override
string ToString()
{
return
"ChangeRowCSSByCheckBox";
}
}
}
private ChangeRowCSSByCheckBox _changeRowCSSByCheckBox;
/// <summary>
/// 通过行的CheckBox的选中与否来修改行的样式
/// </summary>
[
Description(
"通过行的CheckBox的选中与否来修改行的样式"),
Category(
"扩展"),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
PersistenceMode(PersistenceMode.InnerProperty)
]
public
virtual ChangeRowCSSByCheckBox ChangeRowCSSByCheckBox
{
get
{
if (_changeRowCSSByCheckBox ==
null)
{
_changeRowCSSByCheckBox =
new ChangeRowCSSByCheckBox();
}
return _changeRowCSSByCheckBox;
}
}
using System;
using System.Collections.Generic;
using System.Text;
namespace YYControls.SmartGridView
{
/// <summary>
/// javascript
/// </summary>
public
class JavaScriptConstant
{
internal
const
string jsChangeRowClassName =
@"<script type=""text/javascript"">
//<![CDATA[
function yy_ChangeRowClassName(id, cssClass, isForce)
{
objRow = document.getElementById(id);
// 如果row的yy_selected属性是'false'或者没有yy_selected属性或者要求强制设置
// 那么修改该行的className
if (!objRow.attributes['yy_selected'] || objRow.attributes['yy_selected'].value == '
false' || isForce ==
true)
{
document.getElementById(id).className = cssClass;
}
}
// 设置行的yy_selected属性
function yy_SetRowSelectedAttribute(id, bln)
{
document.getElementById(id).attributes['yy_selected'].value = bln;
}
// 以id结尾的CheckBox执行两次click事件
function yy_DoubleClickCheckBox(id)
{
var allInput = document.all.tags('INPUT');
for (var i=0; i < allInput.length; i++)
{
if (allInput[i].type == 'checkbox' && allInput[i].id.endWith('checkitem'))
{
// 触发click事件而不执行yy_ClickCheckItem()函数
isInvokeClickCheckItem =
false;
allInput[i].click();
isInvokeClickCheckItem =
false;
allInput[i].click();
}
}
}
String.prototype.endWith = function(oString){
var reg =
new RegExp(oString +
""$"");
return reg.test(
this);
}
//]]>
</script>";
}
}
[索引页]
[源码下载]
扩展GridView控件(7) - 行的指定复选框选中时改变行的样式
作者：webabcd
/*正式版的实现 开始*/
扩展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(' yy_sgv_crListener)
}
else
{
window.addEventListener('load', yy_sgv_crListener, false);
}
/*行的指定复选框选中时改变行的样式 结束*/
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(' yy_sgv_crListener)
}
else
{
window.addEventListener('load', yy_sgv_crListener, false);
}
/*行的指定复选框选中时改变行的样式 结束*/
c#
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
namespace YYControls.SmartGridViewFunction
{
/// <summary>
/// 扩展功能：行的指定复选框选中时改变行的样式
/// </summary>
public
class CheckedRowCssClassFunction : ExtendFunction
{
/// <summary>
/// 构造函数
/// </summary>
public CheckedRowCssClassFunction()
:
base()
{
}
/// <summary>
/// 构造函数
/// </summary>
/// <param name="sgv">SmartGridView对象</param>
public CheckedRowCssClassFunction(SmartGridView sgv)
:
base(sgv)
{
}
/// <summary>
/// 扩展功能的实现
/// </summary>
protected
override
void Execute()
{
this._sgv.PreRender +=
new EventHandler(_sgv_PreRender);
}
/// <summary>
/// SmartGridView的PreRender事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void _sgv_PreRender(
object sender, EventArgs e)
{
// 构造向数组中添加成员的脚本
string scriptString = "";
scriptString += String.Format(
"yy_sgv_crGridView_pre.push('{0}');", Helper.Common.GetChildControlPrefix(
this._sgv));
scriptString += String.Format(
"yy_sgv_crCheckbox_post.push('{0}');",
this._sgv.CheckedRowCssClass.CheckBoxID);
scriptString += String.Format(
"yy_sgv_crClassName = '{0}';",
this._sgv.CheckedRowCssClass.CssClass);
// 注册向数组中添加成员的脚本
if (!
this._sgv.Page.ClientScript.IsClientScriptBlockRegistered(String.Format(
"yy_sgv_checkedRowCssClass_{0}",
this._sgv.ClientID)))
{
this._sgv.Page.ClientScript.RegisterClientScriptBlock
(
this._sgv.GetType(),
String.Format(
"yy_sgv_checkedRowCssClass_{0}",
this._sgv.ClientID),
scriptString,
true
);
}
}
}
}
/*正式版的实现 结束*/
/*测试版的实现 开始*/
介绍
在GridView中如果每行都有复选框的话，选中了某个复选框则修改该复选框所在行的样式，这是经常要用到的功能，因此我们来扩展一下GridView控件。
控件开发
1、新建一个继承自GridView的类。
在GridView中如果每行都有复选框的话，选中了某个复选框则修改该复选框所在行的样式，这是经常要用到的功能，因此我们来扩展一下GridView控件。
控件开发
1、新建一个继承自GridView的类。
/// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(
@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public
class SmartGridView : GridView
{
}
/// 继承自GridView
/// </summary>
[ToolboxData(
@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public
class SmartGridView : GridView
{
}
2、新建一个ChangeRowCSSByCheckBox实体类，有两个属性
using System;
using System.Collections.Generic;
using System.Text;
using System.ComponentModel;
namespace YYControls.SmartGridView
{
/// <summary>
/// 通过行的CheckBox的选中与否来修改行的样式
/// 实体类
/// </summary>
[TypeConverter(
typeof(ExpandableObjectConverter))]
public
class ChangeRowCSSByCheckBox
{
private
string _checkBoxID;
/// <summary>
/// 根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID
/// </summary>
[
Description(
"根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID"),
Category(
"扩展"),
DefaultValue(""),
NotifyParentProperty(
true)
]
public
string CheckBoxID
{
get {
return _checkBoxID; }
set { _checkBoxID = value; }
}
private
string _cssClassRowSelected;
/// <summary>
/// 选中行的样式的 CSS 类名
/// </summary>
[
Description(
"选中行的样式的 CSS 类名"),
Category(
"扩展"),
DefaultValue(""),
NotifyParentProperty(
true)
]
public
string CssClassRowSelected
{
get {
return _cssClassRowSelected; }
set { _cssClassRowSelected = value; }
}
/// <summary>
/// ToString()
/// </summary>
/// <returns></returns>
public
override
string ToString()
{
return
"ChangeRowCSSByCheckBox";
}
}
}
3、在继承自GridView的类中加一个复杂对象属性，该复杂对象就是第2步创建的那个ChangeRowCSSByCheckBox
private ChangeRowCSSByCheckBox _changeRowCSSByCheckBox;
/// <summary>
/// 通过行的CheckBox的选中与否来修改行的样式
/// </summary>
[
Description(
"通过行的CheckBox的选中与否来修改行的样式"),
Category(
"扩展"),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
PersistenceMode(PersistenceMode.InnerProperty)
]
public
virtual ChangeRowCSSByCheckBox ChangeRowCSSByCheckBox
{
get
{
if (_changeRowCSSByCheckBox ==
null)
{
_changeRowCSSByCheckBox =
new ChangeRowCSSByCheckBox();
}
return _changeRowCSSByCheckBox;
}
}
4、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里
using System;
using System.Collections.Generic;
using System.Text;
namespace YYControls.SmartGridView
{
/// <summary>
/// javascript
/// </summary>
public
class JavaScriptConstant
{
internal
const
string jsChangeRowClassName =
@"<script type=""text/javascript"">
//<![CDATA[
function yy_ChangeRowClassName(id, cssClass, isForce)
{
objRow = document.getElementById(id);
// 如果row的yy_selected属性是'false'或者没有yy_selected属性或者要求强制设置
// 那么修改该行的className
if (!objRow.attributes['yy_selected'] || objRow.attributes['yy_selected'].value == '
false' || isForce ==
true)
{
document.getElementById(id).className = cssClass;
}
}
// 设置行的yy_selected属性
function yy_SetRowSelectedAttribute(id, bln)
{
document.getElementById(id).attributes['yy_selected'].value = bln;
}
// 以id结尾的CheckBox执行两次click事件
function yy_DoubleClickCheckBox(id)
{
var allInput = document.all.tags('INPUT');
for (var i=0; i < allInput.length; i++)
{
if (allInput[i].type == 'checkbox' && allInput[i].id.endWith('checkitem'))
{
// 触发click事件而不执行yy_ClickCheckItem()函数
isInvokeClickCheckItem =
false;
allInput[i].click();
isInvokeClickCheckItem =
false;
allInput[i].click();
}
}
}
String.prototype.endWith = function(oString){
var reg =
new RegExp(oString +
""$"");
return reg.test(
this);
}
//]]>
</script>";
}
}
本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/345528，如需转载请自行联系原作者
