GridView选中行变色（无刷新）

最新推荐文章于 2014-10-13 21:37:00 发布

转载最新推荐文章于 2014-10-13 21:37:00 发布 · 388 阅读

文章标签：

#javascript #null #server #asp

asp.net 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript实现在ASP.NET中GridView行点击选中并改变背景颜色的功能，包括添加JavaScript代码、配置GridView的OnRowDataBound事件及具体实现步骤。

实现方式:通过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