为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方法，添加已经定义好的样式，实现丰富的页面显示效果。