GridView随意点击一处全选整行方法
在使用GridView时,默认的选择按钮很不美观,更多的时候是需要用户随意点击一行的任意位置即可选中整行,并作相应的操作,本文使用RowCreated()和SelectedIndexChanging()两个方法组合使用来达到这个效果。
首先在GridView中创建这2个事件,通过点击GridView属性,选择事件按钮,双击相应属性位置即可创建这两个方法。
在后台代码中,找到RowCreated()的方法体,添加以下代码
1
if (e.Row.RowType == DataControlRowType.DataRow)
2
{
3
//鼠标进入行时
4
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#C0C0FF';this.style.cursor= 'hand ';");
5
//鼠标离开行时
6
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor");
7
//任意行都为选择行
8
e.Row.Attributes.Add("onclick", "__doPostBack('gdvUserName','Select$" + e.Row.RowIndex + "')");
9
}

2

3

4

5

6

7

8

9

方法里定义了GridView每一行创建时,鼠标覆盖和鼠标离开时颜色变化,以及点击任意位置,调用GridView的SelectedIndexChanging()事件,剩下就是在SelectedIndexChanging()中可以编写对该行操作的方法体内容了,
这样就实现了,鼠标经过颜色改变并且任意位置点击都可以选择整行的效果了。
技术改变生活!