扩展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>上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);
        }

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

OK
[源码下载]