鼠标经过行时改变行的样式
一. 用到的事件
onmouseover--当用户将鼠标移入对象时触发
onmouseout---当用户将鼠标移出对象时触发
也就是当鼠标移动到GridView的数据行上时改变该数据行的样式
移出数据行是恢复该数据行的样式.
二. 也就是是说在数据绑定行时要将该属性添加到GridView的每一数据行(也就是在GridView呈现之前)
GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
e.Row.Attributes.Add("onmouseover", "c=this.className,this.className='OverRow'")
e.Row.Attributes.Add("onmouseout", "this.className=c")
这里用了一个变量C来保存数据行的样式名称
三. 作者没有使用
protected override void OnRowDataBound(GridViewRowEventArgs e)
{
.....
base.OnRowDataBound(e);
}来处理
而是另外定义了委托和事件来处理
委托public delegate void RowDataBoundDataRowHandler(object sender, GridViewRowEventArgs e);
事件
public event RowDataBoundDataRowHandler RowDataBoundDataRow
protected virtual void OnRowDataBoundDataRow(GridViewRowEventArgs e)
{
RowDataBoundDataRowHandler handler = Events[rowDataBoundDataRowEventKey] as RowDataBoundDataRowHandler;
if (handler != null)
{
handler(this, e);
}
}
将GridView的RowDataBoundDataRow事件跟方法_sgv_RowDataBoundDataRow联系起来
this._sgv.RowDataBoundDataRow += new MyGridView.RowDataBoundDataRowHandler(_sgv_RowDataBoundDataRow);
void _sgv_RowDataBoundDataRow(object sender, GridViewRowEventArgs e)
{
Helper.Common.SetAttribute(e.Row, "onmouseover", String.Format("yy_sgv_changeMouseOverCssClass(this, '{0}')", this._sgv.MouseOverCssClass), AttributeValuePosition.Last);
Helper.Common.SetAttribute(e.Row, "onmouseout", "yy_sgv_changeMouseOverCssClass(this)", AttributeValuePosition.Last);
}
四. 在添加数据行的属性时没有使用e.Row.Attributes.Add, 而是使用了接口IAttributeAccessor的GetAttribute(key)和SetAttribute(key, value), 也就可以
避免在多次添加统一属性的内容时冲掉属性原来的内容。
GetAttribute(key)--一以数据行为Key,获得该行属性内容(是String),然后可将该内容修改后重新赋予
SetAttribute(key, value)
五。"c=this.className,this.className='OverRow'"和"this.className=c"用了一个JavaScript函数(yy_sgv_changeMouseOverCssClass)处理,
该函数放在一个JavaScript文件中, 该函数中的arguments.length来决定是onmouseover,还是onmouseout
/*Helper 开始*/
function yy_sgv_get(id)
{
/// <summary>$get()</summary>
return document.getElementById(id);
}
function yy_sgv_changeCssClass(param, cssClass)
{
/// <summary>根据ID或元素设置其样式 css 类名</summary>
if (typeof(param) == 'object')
param.className = cssClass;
else if (typeof(param) == 'string')
yy_sgv_get(param).className = cssClass;
}
/*鼠标经过行时改变行的样式 开始*/
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);
}
}
/*鼠标经过行时改变行的样式 结束*/
六。脚本文件和样式文件的引用
在引用的脚本文件或样式文件时,有三个步骤要注意:
1 装配该文件,assembly
2 注册该文件,Page.ClientScript.RegisterClientScriptInclude
3 该文件在资源视图中的'生成操作'为嵌入资源