GridView選中行變色(無重新整理)

來源:互聯網
上載者:User

以前在網上找過不少方法,但不是不好用就是要重新整理頁面,昨天把以前做的一個需要重新整理選中行的代碼修改了一下,還挺好用,拿出來大家分享一下,有需要改進之處,歡迎指正!

實現方式:通過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 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.