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

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。

<a href="http://webabcd.blog.51cto.com/1787395/345429" target="_blank">[索引页]</a>

<a href="http://down.51cto.com/data/101204">[源码下载]</a>

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

/*正式版的实现 开始*/

介绍

扩展GridView控件：

鼠标经过行的时候改变该行的样式，鼠标离开行的时候恢复该行的样式

使用方法（设置属性）：

MouseOverCssClass - 鼠标经过行时行的 CSS 类名

关键代码

/*鼠标经过行时改变行的样式 开始*/ 

var yy_sgv_originalCssClassName = ''; // 初始样式 

function yy_sgv_changeMouseOverCssClass(obj, cssClassName) 

{ 

/// &lt;summary&gt;鼠标经过时改变样式&lt;/summary&gt; 

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

// &lt;summary&gt; 

/// 继承自GridView 

/// &lt;/summary&gt; 

[ToolboxData(@"&lt;{0}:SmartGridView runat='server'&gt;&lt;/{0}:SmartGridView&gt;")] 

public class SmartGridView : GridView 

}

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

private string _cssClassMouseOver; 

                /// &lt;summary&gt; 

                /// 鼠标经过的样式 CSS 类名 

                /// &lt;/summary&gt; 

                [Browsable(true)] 

                [Description("鼠标经过的样式 CSS 类名")] 

                [DefaultValue("")] 

                [Category("扩展")] 

                public virtual string CssClassMouseOver 

                { 

                        get { return _cssClassMouseOver; } 

                        set { _cssClassMouseOver = value; } 

                }

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

/// &lt;summary&gt; 

                /// OnRowDataBound 

                /// &lt;param name="e"&gt;&lt;/param&gt; 

                protected override void OnRowDataBound(GridViewRowEventArgs e) 

                        if (e.Row.RowType == DataControlRowType.DataRow) 

                        { 

                                // _cssClassMouseOver不是空则执行 

                                if (!string.IsNullOrEmpty(this._cssClassMouseOver)) 

                                { 

                                        // 在&lt;tr&gt;上 

                                        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; 

                                                case DataControlRowState.Normal: 

                                                        cssClassMouseOut = base.RowStyle.CssClass; 

                                                case DataControlRowState.Selected: 

                                                        cssClassMouseOut = base.SelectedRowStyle.CssClass; 

                                                default: 

                                                        cssClassMouseOut = ""; 

                                        } 

                                        // 增加&lt;tr&gt;的dhtml事件 

                                        e.Row.Attributes.Add("onmouseout", "this.className = '" + cssClassMouseOut + "'"); 

                                } 

                        } 

                        base.OnRowDataBound(e); 

控件使用

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

aspx文件

&lt;yyc:SmartGridView ID="sgvList" runat="server"&gt; 

&lt;/yyc:SmartGridView&gt;

css文件

.over    

        background-color : Red; 

skin文件

&lt;yyc:SmartGridView runat="server" CssClassMouseOver="over"&gt; 

&lt;/yyc:SmartGridView&gt; 

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

 /// &lt;summary&gt; 

                /// 构造函数 

                public SmartGridView() 

                        this.PreRender += new EventHandler(SmartGridView_PreRender); 

                } 

                /// PreRender 

                /// &lt;param name="sender"&gt;sender&lt;/param&gt; 

                /// &lt;param name="e"&gt;e&lt;/param&gt; 

                void SmartGridView_PreRender(object sender, EventArgs e) 

                        if (!string.IsNullOrEmpty(this._cssClassMouseOver)) 

                                // 注册一个客户端变量 

                                if (!Page.ClientScript.IsClientScriptBlockRegistered("jsRowClass")) 

                                        Page.ClientScript.RegisterClientScriptBlock( 

                                                this.GetType(), 

                                                "jsRowClass", 

                                                @"&lt;script type=""text/javascript""&gt;var yy_RowClass&lt;/script&gt;" 

                                                ); 

                                        e.Row.Attributes.Add("onmouseover", "yy_RowClass=this.className;this.className='"+ _cssClassMouseOver + "'"); 

                                        e.Row.Attributes.Add("onmouseout", "this.className=yy_RowClass"); 

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

OK

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