扩展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>上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 >

css文件

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

skin文件

< yyc:SmartGridView  runat ="server"  CssClassMouseOver ="over" >
</ 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);
        }