GridView选中行变色（无刷新）

 

实现方式:通过javascript进行控制，点击行中任何一个位置，改行被选中变色。

1、首先在.aspx页面块中添加javascript

 1  < script type = " text/javascript " >
 2      var prevselitem = null ;
 3      function selectx(row)
 4      {
 5               if (prevselitem != null )
 6              {
 7                  prevselitem.style.backgroundColor = ' #ffffff ' ;
 8              }
 9              row.style.backgroundColor = ' PeachPuff ' ;
10              prevselitem = row;
11              
12      }
13  </ script >
14 
15 

2、然后修改GridView,添加事件OnRowDataBound,如：

1  < asp:GridView ID = " GridView1 "  runat = " server "  AllowPaging = " True "  AutoGenerateColumns = " False "   Width = " 100% "  PageSize = " 12 "  OnRowDataBound = " GridView1_RowDataBound " >
2  // 省略
3  </ asp:GridView >

3、最后在.aspx.cs页面中添加

 1  protected   void  GridView1_RowDataBound( object  sender,GridViewRowEventArgs e)
 2      {
 3            if  (e.Row.RowType  ==  DataControlRowType.DataRow)
 4              {
 5                  e.Row.Attributes.Add( " onmouseover " ,  " if(this!=prevselitem){this.style.backgroundColor='#Efefef'} " ); // 当鼠标停留时更改背景色
 6                  e.Row.Attributes.Add( " onmouseout " ,  " if(this!=prevselitem){this.style.backgroundColor='#ffffff'} " ); // 当鼠标移开时还原背景色
 7                  e.Row.Attributes.Add( " onclick " , e.Row.ClientID.ToString()  +   " .checked=true;selectx(this) " );
 8              }
 9      }
10 
11