粗浅注释-《扩展GridView》---鼠标经过行时改变行的样式 来源:豆豆技术网 其作者是:webabcd

鼠标经过行时改变行的样式

一. 用到的事件
 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 该文件在资源视图中的'生成操作'为嵌入资源

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值