扩展GridView控件(1) - 鼠标经过行时改变行的样式

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]

扩展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的类。

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

控件使用
添加这个控件到工具箱里，然后拖拽到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); 
                }

 

 

/*测试版的实现 结束*/

 

OK
[源码下载]

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/345442，如需转载请自行联系原作者