GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]
作者： webabcd
/*正式版的实现 开始*/
介绍
扩展GridView控件：
鼠标经过行的时候改变该行的样式，鼠标离开行的时候恢复该行的样式
使用方法（设置属性）：
MouseOverCssClass - 鼠标经过行时行的 CSS 类名
关键代码
/*鼠标经过行时改变行的样式 开始*/
var yy_sgv_originalCssClassName = '';
// 初始样式
function yy_sgv_changeMouseOverCssClass(obj, cssClassName)
{
/// <summary>鼠标经过时改变样式</summary>
if (arguments.length == 1)
{
yy_sgv_changeCssClass(obj, yy_sgv_originalCssClassName);
yy_sgv_originalCssClassName = '';
}
else
{
yy_sgv_originalCssClassName = obj.className;
yy_sgv_changeCssClass(obj, cssClassName);
}
}
/*鼠标经过行时改变行的样式 结束*/
/*正式版的实现 结束*/
/*测试版的实现 开始*/
// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(
@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public
class SmartGridView : GridView
{
}
private
string _cssClassMouseOver;
/// <summary>
/// 鼠标经过的样式 CSS 类名
/// </summary>
[Browsable(
true)]
[Description(
"鼠标经过的样式 CSS 类名")]
[DefaultValue("")]
[Category(
"扩展")]
public
virtual
string CssClassMouseOver
{
get {
return _cssClassMouseOver; }
set { _cssClassMouseOver = value; }
}
/// <summary>
/// 构造函数
/// </summary>
public SmartGridView()
{
this.PreRender +=
new EventHandler(SmartGridView_PreRender);
}
/// <summary>
/// PreRender
/// </summary>
/// <param name="sender">sender</param>
/// <param name="e">e</param>
void SmartGridView_PreRender(
object sender, EventArgs e)
{
if (!
string.IsNullOrEmpty(
this._cssClassMouseOver))
{
// 注册一个客户端变量
if (!Page.ClientScript.IsClientScriptBlockRegistered(
"jsRowClass"))
{
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"jsRowClass",
@"<script type=""text/javascript
"">var yy_RowClass</script>"
);
}
}
}
/// <summary>
/// OnRowDataBound
/// </summary>
/// <param name="e"></param>
protected
override
void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// _cssClassMouseOver不是空则执行
if (!
string.IsNullOrEmpty(
this._cssClassMouseOver))
{
e.Row.Attributes.Add(
"onmouseover",
"yy_RowClass=this.className;this.className='"+ _cssClassMouseOver +
"'");
e.Row.Attributes.Add(
"onmouseout",
"this.className=yy_RowClass");
}
}
base.OnRowDataBound(e);
}
/*测试版的实现 结束*/
[索引页]
[源码下载]
扩展GridView控件(1) - 鼠标经过行时改变行的样式
作者： webabcd
/*正式版的实现 开始*/
扩展GridView控件：
鼠标经过行的时候改变该行的样式，鼠标离开行的时候恢复该行的样式
使用方法（设置属性）：
MouseOverCssClass - 鼠标经过行时行的 CSS 类名
关键代码
/*鼠标经过行时改变行的样式 开始*/
var yy_sgv_originalCssClassName = '';
// 初始样式
function yy_sgv_changeMouseOverCssClass(obj, cssClassName)
{
/// <summary>鼠标经过时改变样式</summary>
if (arguments.length == 1)
{
yy_sgv_changeCssClass(obj, yy_sgv_originalCssClassName);
yy_sgv_originalCssClassName = '';
}
else
{
yy_sgv_originalCssClassName = obj.className;
yy_sgv_changeCssClass(obj, cssClassName);
}
}
/*鼠标经过行时改变行的样式 结束*/
/*正式版的实现 结束*/
/*测试版的实现 开始*/
介绍
我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件，以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。
控件开发
1、新建一个继承自GridView的类。
我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件，以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。
控件开发
1、新建一个继承自GridView的类。
// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(
@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public
class SmartGridView : GridView
{
}
2、加一个属性，用来指定鼠标经过行时，行的css类名
private
string _cssClassMouseOver;
/// <summary>
/// 鼠标经过的样式 CSS 类名
/// </summary>
[Browsable(
true)]
[Description(
"鼠标经过的样式 CSS 类名")]
[DefaultValue("")]
[Category(
"扩展")]
public
virtual
string CssClassMouseOver
{
get {
return _cssClassMouseOver; }
set { _cssClassMouseOver = value; }
}
3、重写OnRowDataBound实现鼠标经过行时改变行的样式的功能。主要是给<tr>增加onmouseover事件和onmouseout事件。
/// <summary>
/// OnRowDataBound
/// </summary>
/// <param name="e"></param>
protected
override
void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// _cssClassMouseOver不是空则执行
if (!
string.IsNullOrEmpty(
this._cssClassMouseOver))
{
// 在<tr>上
e.Row.Attributes.Add(
"onmouseover",
"this.className = '" +
this._cssClassMouseOver +
"'");
// 样式的名称（css类名）
string cssClassMouseOut = "";
// 根据RowState的不同，
switch (e.Row.RowState)
{
case DataControlRowState.Alternate:
cssClassMouseOut =
base.AlternatingRowStyle.CssClass;
break;
case DataControlRowState.Edit:
cssClassMouseOut =
base.EditRowStyle.CssClass;
break;
case DataControlRowState.Normal:
cssClassMouseOut =
base.RowStyle.CssClass;
break;
case DataControlRowState.Selected:
cssClassMouseOut =
base.SelectedRowStyle.CssClass;
break;
default:
cssClassMouseOut = "";
break;
}
// 增加<tr>的dhtml事件
e.Row.Attributes.Add(
"onmouseout",
"this.className = '" + cssClassMouseOut +
"'");
}
}
base.OnRowDataBound(e);
}
/// OnRowDataBound
/// </summary>
/// <param name="e"></param>
protected
override
void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// _cssClassMouseOver不是空则执行
if (!
string.IsNullOrEmpty(
this._cssClassMouseOver))
{
// 在<tr>上
e.Row.Attributes.Add(
"onmouseover",
"this.className = '" +
this._cssClassMouseOver +
"'");
// 样式的名称（css类名）
string cssClassMouseOut = "";
// 根据RowState的不同，
switch (e.Row.RowState)
{
case DataControlRowState.Alternate:
cssClassMouseOut =
base.AlternatingRowStyle.CssClass;
break;
case DataControlRowState.Edit:
cssClassMouseOut =
base.EditRowStyle.CssClass;
break;
case DataControlRowState.Normal:
cssClassMouseOut =
base.RowStyle.CssClass;
break;
case DataControlRowState.Selected:
cssClassMouseOut =
base.SelectedRowStyle.CssClass;
break;
default:
cssClassMouseOut = "";
break;
}
// 增加<tr>的dhtml事件
e.Row.Attributes.Add(
"onmouseout",
"this.className = '" + cssClassMouseOut +
"'");
}
}
base.OnRowDataBound(e);
}
控件使用
添加这个控件到工具箱里，然后拖拽到webform上，设置其CssClassMouseOver属性即可
aspx文件
添加这个控件到工具箱里，然后拖拽到webform上，设置其CssClassMouseOver属性即可
aspx文件
<yyc:SmartGridView ID="sgvList" runat="server">
</yyc:SmartGridView>
</yyc:SmartGridView>
css文件
.over
{
background-color : Red;
}
{
background-color : Red;
}
skin文件
<yyc:SmartGridView runat="server" CssClassMouseOver="over">
</yyc:SmartGridView>
</yyc:SmartGridView>
注：其实最好的实现办法应该如下，但是因为之后我针对GridView扩展的其他功能可能会与此有冲突，所以没这么用。
/// <summary>
/// 构造函数
/// </summary>
public SmartGridView()
{
this.PreRender +=
new EventHandler(SmartGridView_PreRender);
}
/// <summary>
/// PreRender
/// </summary>
/// <param name="sender">sender</param>
/// <param name="e">e</param>
void SmartGridView_PreRender(
object sender, EventArgs e)
{
if (!
string.IsNullOrEmpty(
this._cssClassMouseOver))
{
// 注册一个客户端变量
if (!Page.ClientScript.IsClientScriptBlockRegistered(
"jsRowClass"))
{
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"jsRowClass",
@"<script type=""text/javascript
"">var yy_RowClass</script>"
);
}
}
}
/// <summary>
/// OnRowDataBound
/// </summary>
/// <param name="e"></param>
protected
override
void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// _cssClassMouseOver不是空则执行
if (!
string.IsNullOrEmpty(
this._cssClassMouseOver))
{
e.Row.Attributes.Add(
"onmouseover",
"yy_RowClass=this.className;this.className='"+ _cssClassMouseOver +
"'");
e.Row.Attributes.Add(
"onmouseout",
"this.className=yy_RowClass");
}
}
base.OnRowDataBound(e);
}
/*测试版的实现 结束*/
OK
[源码下载]
[源码下载]
本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/345442，如需转载请自行联系原作者
