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


}