利用 Jquery 讓 Gridview選取時上色

2013-02-26

5619
0
.Net
2013-02-27

以往我們要讓Gridview Row選取時，出現底色不同的效果，我們需要撰寫額外的code來達成，
但是每拖拉一個GridView出來，都要如法炮製，真的是很累。
最近又遇到了相同的問題，想說這樣做法實在是太累了，所以動起了懶人的念頭，
希望GridView中，只要是有button被點擊，則該行就自動上色，然後換頁的時候，會自動取消。

以往我們要讓Gridview Row選取時，出現底色不同的效果，我們需要撰寫額外的code來達成，

但是每拖拉一個GridView出來，都要如法炮製，真的是很累，有時候還會漏掉事件…。

最近又遇到了相同的問題，想說這樣做法實在是太累了，所以動起了懶人的念頭，

希望GridView中，只要是有 button 或是 Link Button 被點擊，則該行就自動上色，然後換頁的時候，會自動取消。

本範例也可以在Updatepanel下使用。

好，首先我們要先給個樣式表，去定義當Row被選中時，我的背景顏色要換成甚麼？

<style>
    .highlight
{
    background-color: Yellow;
}

    </style>

由於網頁Postback後，class屬性就會不見，為了要維持換頁後，還記得之前選擇的是哪一行，

所以要有能 unat server的控制項，所以我們需要增加一個隱藏欄位來記住值， (建議可以放在 MasterPage，免去需每頁手動增加的麻煩 )

<asp:HiddenField ID="GVSelObj" runat="server" />

然後開始撰寫Jquery，這邊注意的是，你的Gridview必須要有class屬性為"GV"

           <script type="text/javascript">

               function bindEvents() {

                   $(function () {
                       //判斷影藏欄位有沒有值，若有將最靠近該按鈕的tr增加class
                       if ($("[id$=GVSelObj]").val() != "") {
                           $('#' + $("[id$=GVSelObj]").val()).closest("tr").removeClass().addClass("highlight");
                       }
                       //當GV中的按鈕被點擊時

                       $(".GV :submit,.GV a").click(function () {
                           //取得目前點選物件
                           var btn = $(this);
                           $("[id$=GVSelObj]").val(btn.attr('id'));
                           btn.closest("tr").removeClass().addClass("highlight");

                       });
                       //當GV的最後一個table(頁碼)被點選時 (換頁時取消選取效果)
                       $(".GV table").last().click(function () {

                           $(".GV tr").removeClass();
                           $("[id$=GVSelObj]").val('');

                       });
                   });
               }
               //啟用function
               $(document).ready(function () {
                   bindEvents();
                     //讓postback後重新綁定function
                   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (evt, args) {
                   bindEvents();
                   });
               });

</script>

另外要注意的是，如果你的 GridView有設定 AlternatingRowStyle，則偶數行效果會不出現，估計應該是樣式被覆蓋了，
所以必須要清除它。

另外，若您沒有使用updatepanel，請將Sys.WebForms.PageRequestManager.getInstance…移除

這樣就大功告成了，接下來只要將上面的程式包成js跟css來引用，就可以快速達成效果囉，
而且好處是透過樣式表，我們可以隨心所欲的變動整個 Project 的樣式了。

回首頁