介绍
我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件,以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。
控件开发
1、新建一个继承自GridView的类。
2、加一个属性,用来指定鼠标经过行时,行的css类名
3、重写OnRowDataBound实现鼠标经过行时改变行的样式的功能。主要是给<tr>增加onmouseover事件和onmouseout事件。
控件使用
添加这个控件到工具箱里,然后拖拽到webform上,设置其CssClassMouseOver属性即可
aspx文件
css文件
skin文件
注:其实最好的实现办法应该如下,但是因为之后我针对GridView扩展的其他功能可能会与此有冲突,所以没这么用。
我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件,以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。
控件开发
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、加一个属性,用来指定鼠标经过行时,行的css类名
private
string
_cssClassMouseOver;
/**/ /// <summary>
/// 鼠标经过的样式 CSS 类名
/// </summary>
[Browsable( true )]
[Description( " 鼠标经过的样式 CSS 类名 " )]
[DefaultValue( "" )]
[Category( " 扩展 " )]
public virtual string CssClassMouseOver
{
get { return _cssClassMouseOver; }
set { _cssClassMouseOver = value; }
}
/**/ /// <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>上onmouseover时<tr>的样式(css类名)
e.Row.Attributes.Add( " onmouseover " , " this.className = ' " + this ._cssClassMouseOver + " ' " );
// 样式的名称(css类名)
string cssClassMouseOut = "" ;
// 根据RowState的不同,onmouseout时<tr>的不同样式(css类名)
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事件onmouseout
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>上onmouseover时<tr>的样式(css类名)
e.Row.Attributes.Add( " onmouseover " , " this.className = ' " + this ._cssClassMouseOver + " ' " );
// 样式的名称(css类名)
string cssClassMouseOut = "" ;
// 根据RowState的不同,onmouseout时<tr>的不同样式(css类名)
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事件onmouseout
e.Row.Attributes.Add( " onmouseout " , " this.className = ' " + cssClassMouseOut + " ' " );
}
}
base .OnRowDataBound(e);
}
控件使用
添加这个控件到工具箱里,然后拖拽到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);
}
/// 构造函数
/// </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);
}