GridView控件改变CheckBox选中的行的样式

介绍
在GridView中如果每行都有复选框的话，选中了某个复选框则修改该复选框所在行的样式，这是经常要用到的功能，因此我们来扩展一下GridView控件。


控件开发
1、新建一个继承自GridView的类。

/**/ ///<summary>
///继承自GridView
///</summary>
[ToolboxData( @" <{0}:SmartGridViewrunat='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))]
publicclassChangeRowCSSByCheckBox
{
privatestring_checkBoxID;
/**////<summary>
///根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID
///</summary>
[
Description("根据哪个ChecxBox来判断是否选中了行，指定该CheckBox的ID"),
Category("扩展"),
DefaultValue(""),
NotifyParentProperty(true)
]
publicstringCheckBoxID
{
get{return_checkBoxID;}
set{_checkBoxID=value;}
}

privatestring_cssClassRowSelected;
/**////<summary>
///选中行的样式的CSS类名
///</summary>
[
Description("选中行的样式的CSS类名"),
Category("扩展"),
DefaultValue(""),
NotifyParentProperty(true)
]
publicstringCssClassRowSelected
{
get{return_cssClassRowSelected;}
set{_cssClassRowSelected=value;}
}

/**////<summary>
///ToString()
///</summary>
///<returns></returns>
publicoverridestringToString()
{
return"ChangeRowCSSByCheckBox";
}
}
}

3、在继承自GridView的类中加一个复杂对象属性，该复杂对象就是第2步创建的那个ChangeRowCSSByCheckBox

private ChangeRowCSSByCheckBox_changeRowCSSByCheckBox;
/**/ ///<summary>
///通过行的CheckBox的选中与否来修改行的样式
///</summary>
[
Description( " 通过行的CheckBox的选中与否来修改行的样式 " ),
Category( " 扩展 " ),
DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
PersistenceMode(PersistenceMode.InnerProperty)
]
public virtual ChangeRowCSSByCheckBoxChangeRowCSSByCheckBox
{
get
{
if(_changeRowCSSByCheckBox==null)
{
_changeRowCSSByCheckBox=newChangeRowCSSByCheckBox();
}
return_changeRowCSSByCheckBox;
}
}

4、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里

using System;
using System.Collections.Generic;
using System.Text;

namespace YYControls.SmartGridView
{
/**////<summary>
///javascript
///</summary>
publicclassJavaScriptConstant
{
internalconststringjsChangeRowClassName=@"<scripttype=""text/javascript"">
//<![CDATA[
functionyy_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属性
functionyy_SetRowSelectedAttribute(id,bln)
{
document.getElementById(id).attributes['yy_selected'].value=bln;
}
//以id结尾的CheckBox执行两次click事件
functionyy_DoubleClickCheckBox(id)
{
varallInput=document.all.tags('INPUT');
　　　　　for(vari=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){
varreg=newRegExp(oString+""$"");
returnreg.test(this);
}
//]]>
</script>";
}
}

5、重写OnPreRender方法，注册上面那段客户端脚本

/**/ ///<summary>
///OnPreRender
///</summary>
///<paramname="e"></param>
protected override void OnPreRender(EventArgse)
{
base.OnPreRender(e);

if((!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CheckBoxID)
&&!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CssClassRowSelected))
||!String.IsNullOrEmpty(CssClassMouseOver))
{
//注册实现改变行样式的客户端脚本
if(!Page.ClientScript.IsClientScriptBlockRegistered("jsChangeRowClassName"))
{
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"jsChangeRowClassName",JavaScriptConstant.jsChangeRowClassName
);
}
//注册调用双击CheckBox函数的客户端脚本
if(!Page.ClientScript.IsStartupScriptRegistered("jsInvokeDoubleClickCheckBox"))
{
Page.ClientScript.RegisterStartupScript(
this.GetType(),
"jsInvokeDoubleClickCheckBox",@"<scripttype=""text/javascript"">yy_DoubleClickCheckBox();</script>"
);
}
}
}

6、重写OnRowDataBound以通过调用相关的javascript函数实现我们想要的功能。

/**/ ///<summary>
///OnRowDataBound
///</summary>
///<paramname="e"></param>
protected override void OnRowDataBound(GridViewRowEventArgse)
{
if(e.Row.RowType==DataControlRowType.DataRow)
{
if(!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CheckBoxID)&&!String.IsNullOrEmpty(ChangeRowCSSByCheckBox.CssClassRowSelected))
{
foreach(TableCelltcine.Row.Cells)
{
//如果发现了指定的CheckBox
if(tc.FindControl(ChangeRowCSSByCheckBox.CheckBoxID)!=null)
{
CheckBoxchk=tc.FindControl(ChangeRowCSSByCheckBox.CheckBoxID)asCheckBox;
stringcssClassUnchecked="";

//根据RowState的不同，取消行的选中后<tr>的不同样式（css类名）
switch(e.Row.RowState)
{
caseDataControlRowState.Alternate:
cssClassUnchecked=base.AlternatingRowStyle.CssClass;
break;
caseDataControlRowState.Edit:
cssClassUnchecked=base.EditRowStyle.CssClass;
break;
caseDataControlRowState.Normal:
cssClassUnchecked=base.RowStyle.CssClass;
break;
caseDataControlRowState.Selected:
cssClassUnchecked=base.SelectedRowStyle.CssClass;
break;
default:
cssClassUnchecked="";
break;
}

//给行增加一个yy_selected属性，用于客户端判断行是否是选中状态
e.Row.Attributes.Add("yy_selected","false");

//添加CheckBox的click事件的客户端调用代码