Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 2014/1/16 9:33:32
扩展GridView(一)——鼠标经过行时改变行的样式_[Asp.Net教程]

扩展GridView(一)——鼠标经过行时改变行的样式_[Asp.Net教程]


GridView既强大又好用。为了让它更强大、更好用,我们来写一个继承自GridView的控件。
[源码下载]
http://files.cnblogs.com/webabcd/yycontrols.rar



扩展GridView(一)——鼠标经过行时改变行的样式



介绍
我们一般是通过在RowDataBound事件里编码的方式实现GridView的鼠标经过行时改变行的样式的功能。但是每次都这样做比较麻烦。所以我们来开发一个继承自GridView的控件,以扩展它的功能。通过设置其CssClassMouseOver属性来实现这样的功能。



控件开发
1、新建一个继承自GridView的类。
复制C#代码保存代码///


/// 继承自GridView
///

[ToolboxData(@"<{0}:SmartGridView runat='server'>")]
public class SmartGridView : GridView
{
}
2、加一个属性,用来指定鼠标经过行时,行的css类名
复制C#代码保存代码private string _cssClassMouseOver;


///


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

[Browsable(true)]
[Description("鼠标经过的样式 CSS 类名")]
[DefaultValue("")]
[Category("扩展")]
public virtual string CssClassMouseOver
{
get { return _cssClassMouseOver; }
set { _cssClassMouseOver = value; }
}
3、构造函数内加一个RowDataBound事件的处理,在该事件内实现鼠标经过行时改变行的样式的功能。主要是给增加onmouseover事件和onmouseout事件。
复制C#代码保存代码///
/// 构造函数
///

public SmartGridView()
: base()
{
// 新增“SmartGridView_RowDataBound”事件处理
this.RowDataBound += new GridViewRowEventHandler(SmartGridView_RowDataBound);
}


///


/// RowDataBound事件
///

/// sender
/// e
protected void SmartGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
SmartGridView sgv = (SmartGridView) sender;


if (e.Row.RowType == DataControlRowType.DataRow)
{
// _cssClassMouseOver不是空则执行
if (!string.IsNullOrEmpty(this._cssClassMouseOver))
{
// 在上onmouseover时的样式(css类名)
e.Row.Attributes.Add("onmouseover", "this.className='" + this._cssClassMouseOver + "';");


// 样式的名称(css类名)
string cssClassMouseOut = "";


// 根据RowState的不同,onmouseout时的不同样式(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;
}


// 增加的dhtml事件onmouseout
e.Row.Attributes.Add("onmouseout", "this.className='" + cssClassMouseOut + "';");
}
}
}


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


aspx文件
复制ASPX代码保存代码


css文件
复制CSS代码保存代码.over
{
background-color : Red;
}
skin文件
复制ASPX代码保存代码


OK


转自【webabcd-.NET】







If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759