扩展GridView控件（一）——鼠标经过行时改变行的样式

添加人：iyond

添加时间：2007-03-29 阅读次数：3174

介绍
我们一般是通过在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);

}

源码下载

GridView 72般绝技（一）

GridView 72般绝技（三）

GridView 72般绝技（五）

GridView 72般绝技（二）

GridView 72般绝技（四）

在GridView显示时间列时，设置时间的格式

C#中加强ListView控件的功能

用ASP.NET AJAX框架扩展HTML Map控件

利用窗体的自定义属性实现窗体传值

扩展GridView控件(11) - 合并指定列的相邻且内容相同的单元格

添加评论

评论主题
您的大名
您的评论
验证码

评论列表

扩展GridView控件（一）——鼠标经过行时改变行的样式

GridView 72般绝技（一）

GridView 72般绝技（三）

GridView 72般绝技（五）

GridView 72般绝技（二）

GridView 72般绝技（四）

在GridView显示时间列时，设置时间的格式

C#中加强ListView控件的功能

用ASP.NET AJAX框架扩展HTML Map控件

利用窗体的自定义属性实现窗体传值

扩展GridView控件(11) - 合并指定列的相邻且内容相同的单元格

用Visual C#开发简单的复合控件

手把手教你如何扩展GridView之自动排序篇

GridView控件——单击命令按钮弹出确认框

扩展GridView控件（十）——再增加一种分页样式

扩展GridView控件（八）——导出为Excel