为GridView添加鼠标事件

在GridView的RowDataBound事件中，可以为行绑定如下的一些属性。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

        ……

}

1、添加onmouseover和onmouseout事件：
        if (e.Row.RowType == DataControlRowType.DataRow)
        {

                e.Row.Attributes.Add("onmouseover", "mouseOver(this);");//当鼠标停留时更改背景色
                e.Row.Attributes.Add("onmouseout", "mouseOut(this);");//当鼠标移开时还原背景色
        }
效果描述：当鼠标指向某一行时，改变这一行的背景色。鼠标离开后，这一行恢复以前的背景色。

前台页面的js：

        var oldColor1='#ffffff',oldColor2='#ffffff';
        var rowid;
        function mouseOver(row)
        {
            var bgColor=row.style.backgroundColor;
            if(bgColor!='#ffff00')
            {
                oldColor1=bgColor;
                row.style.backgroundColor='#C7E4FC';
                row.style.cursor='hand';
            }
        }
        function mouseOut(row)
        {
            var bgColor=row.style.backgroundColor;
            if(bgColor!='#ffff00')
            {
                row.style.backgroundColor=oldColor1;
            }
        }

显示效果如下：

 

 

如图所示：每行原来的背景色是白色；当鼠标移到其上时，背景色变成浅蓝；当鼠标移开某行时，背景色恢复白色；当单击某行时，背景色变为黄色，顶部显示“第*行”中的数字被随之更改；当点击其它行时，原来被点击的行恢复白色背景，行号也会一起更改。

2、添加onclick事件：

            e.Row.Attributes.Add("onclick", "setColorIndex(this,'" + e.Row.Cells[0].Text + "');");//单击，取得主键，用于后面的操作
            e.Row.Attributes["style"] = "Cursor:hand";//设置悬浮鼠标指针形状为"小手"

或

                e.Row.Attributes.Add("onclick", "clickRow(this," + (e.Row.RowIndex + 1) + ");//点击指示当前是第几行
效果描述：当鼠标指向某行时，鼠标的箭头会变成小手效果。单击这一行后，会执行一个预先定义好的客户端js函数

        function setColorIndex(obj,rowid)

        {

            ……

        }

或

        function clickRow(row,rowIndex)
        {
            if(rowid!=null)
            {
                rowid.style.backgroundColor=oldColor2;
            }
            rowid=row;
            oldColor2=oldColor1;
            row.style.backgroundColor='#ffff00';//单击改变背景色，当单击其它行时，原选中行恢复单击前的背景色
            document.getElementById('lblRecIndex').innerHTML=rowIndex;//显示当前是第几行
        }

在这个函数中，我们可以为某些控件付值，也可以通过控制css来改变这一行的样式，效果颇多，可以自己挖掘一下。

3、添加ondbclick事件：

类似于前面添加onclick事件。

扩展：很多服务器端控件都有Attributes属性，我们可以通过这个属性的Add方法为此控件添加许多客户端的事件，方便用户操作。还可以通过Style的Add方法，添加已经定义好的样式，实现丰富的页面显示效果。