`
javatoyou
  • 浏览: 1012721 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

使用javascript实现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. </script>

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. }

OK!

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics