扩展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);
        }
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值