GridView:当鼠标滑过,行的背景颜色发生变化

前提条件:GridView已经能正常的显示数据了!
这里我将NorthWind数据库的Category表显示出来,接着我们要是实现以下三个功能:
1、将GridView中满足CategoryID为偶数的数据行背景色改为Silver;
2、当鼠标滑过GridView中的数据行是,该数据行的颜色变为黄色,且数据字体加粗。鼠标离开行时,还原初始状态;
3、当点击GridView中的行时,行的颜色花生变化,且鼠标的形状变为手型。
这里我们通过定义GridView的RowDataBound事件来实现以上三个功能。GridView.RowDataBound事件是在 GridView 控件中将数据行绑定到数据时发生。
在其中添加以下代码:
//这里我们将对NorthWind数据库的Category表进行操作
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
   //将CategoryID为偶数的行设为银色(Silver)
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
        //判定当前的行是否为数据行(即类型是否为DataRow)
        int cid = Convert.ToInt32(DataBinder.Eval(e.Row.DataItem, "CategoryID"));
        //获取当前行的CategoryID列的值
        if (cid % 2 == 00)
            e.Row.BackColor = Color.Silver;
   }

   //设置鼠标滑过,行变色的效果
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
        //当鼠标放上去的时候 先保存当前行的背景颜色 并设置新的背景色
        e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='yellow'; this.style.fontWeight='bold';");
        //当鼠标离开的时候 将背景颜色恢复成之前的颜色
        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor; this.style.fontWeight='';");
   }

   //设置鼠标点击,行变色、鼠标指针变成手状的效果
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
        e.Row.Attributes.Add("onclick", "this.style.backgroundColor='#99cc00'; this.style.cursor='hand';");
   }
}

留言

Your email address will not be published. Required fields are marked *