GridView控件（一）——鼠标经过行时改变行的样式

我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件，以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。


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

Code

   
     /**//// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}

2、加一个属性，用来指定鼠标经过行时，行的css类名

 

Code1

   
      /**//// <summary>
 /// 鼠标经过的样式 CSS 类名
 /// </summary>
 [Browsable(true)]
 [Description("鼠标经过的样式 CSS 类名")]
 [DefaultValue("")]
 [Category("扩展")]
 public virtual string CssClassMouseOver
 {
 get { return _cssClassMouseOver; }
 set { _cssClassMouseOver = value; }
 }

3、重写OnRowDataBound实现鼠标经过行时改变行的样式的功能。主要是给<tr>增加onmouseover事件和onmouseout事件。

 

Code2

   
      /**//// <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);
 }

控件使用
添加这个控件到工具箱里，然后拖拽到webform上，设置其CssClassMouseOver属性即可

aspx文件

 

Code4

   
     <yyc:SmartGridView ID="sgvList" runat="server">
</yyc:SmartGridView>

css文件

Code5

   
     .over 
{}{
 background-color : Red;
}

skin文件

Code6

   
     <yyc:SmartGridView runat="server" CssClassMouseOver="over">
</yyc:SmartGridView>

注：其实最好的实现办法应该如下，但是因为之后我针对GridView扩展的其他功能可能会与此有冲突，所以没这么用。

 

Code7

   
      /**//// <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);
 }