如何在GridView中加上CheckBox的全選功能

在一些應用上,我們會利用CheckBox來讓使用者勾選需要改變的資料,一次列出10條還好,如果一次列出50條,而使用者都要選取的話,活生生要按50次實在是不貼心的設計,所以此文介紹如何在GridView中加上CheckBox的全選功能。

首先我們當然是要先做出一個有資料的GridView

GridView做好後,我們在後方新增一個樣板欄位(TemplateField)

請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox,如下方

  1. <asp:TemplateField>
  2. <headertemplate>
  3. <asp:CheckBox ID="CheckAll" runat="server" onclick="javascript: SelectAllCheckboxes(this);" Text="全選/取消" ToolTip="按一次全選,再按一次取消全選" />
  4. </headertemplate>
  5. <itemtemplate>
  6. <asp:CheckBox ID="CheckBox2" runat="server" Text=" 全選"/>
  7. </itemtemplate>
  8. </asp:TemplateField>

接者請在該頁面的最底部加上以下的Java Script

  1. <script type="text/javascript">
  2.     function SelectAllCheckboxes(spanChk)
  3.     {
  4.         elm=document.forms[0];
  5.         for(i=0;i<= elm.length -1;i++)
  6.         {
  7.             if(elm[i].type=="checkbox" && elm[i].id!=spanChk.id)
  8.             {
  9.                 if(elm.elements[i].checked!=spanChk.checked)
  10.                     elm.elements[i].click();
  11.             }
  12.         }
  13.     }
  14. </script>

★注意事項:如果您的頁面有套用MasterPage請將上方JS放在標籤上面

?小鋪廢言:到這裡就已經完成了全選和取消全選的功能了,您可以自行測試看看,再來我們要製作修改的部份(你總不會做出全選/取消的功能只是讓使用者按好玩的吧)

接者在頁面上放置一個按鈕(Button),對按鈕點兩下,切換到程式部份

切換到程式部份後我們利用以下code去抓出哪些列(ROW)有被打勾

  1. int i;
  2. for (i = 0; i < this.GridView1.Rows.Count; i++)
  3. {
  4. if (((CheckBox)GridView1.Rows[i].FindControl("CheckBox2")).Checked)
  5. {
  6. Response.Write(GridView1.DataKeys[i].Value.ToString());
  7. //GridView1.DataKeys[i].Value.ToString() 可以抓到該列的DataKeys的值,我設定的是pk值
  8. }
  9. }

★注意事項:如果您的GridVie沒有設定 DataKeyNames="資料欄位"那上方的code就列不出pk值唷

?小鋪廢言:利用以上方式您就可以準確的抓出哪些列有被使用者打勾,來作其他您要執行的程式了

posted @ 2012-02-21 17:29  becket  阅读(1479)  评论(0编辑  收藏  举报