如何在GridView中加上CheckBox的全選功能
- 15042
- 6
在一些應用上,我們會利用CheckBox來讓使用者勾選需要改變的資料,一次列出10條還好,如果一次列出50條,而使用者都要選取的話,活生生要按50次實在是不貼心的設計,所以此文介紹如何在GridView中加上CheckBox的全選功能。
- 最後更新:2012/1/1 下午 08:08:07
◆首先我們當然是要先做出一個有資料的GridView
◆GridView做好後,我們在後方新增一個樣板欄位(TemplateField)
◆請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox,如下方
<asp:TemplateField>
<headertemplate>
<asp:CheckBox ID="CheckAll" runat="server" onclick="javascript: SelectAllCheckboxes(this);" Text="全選/取消" ToolTip="按一次全選,再按一次取消全選" />
</headertemplate>
<itemtemplate>
<asp:CheckBox ID="CheckBox2" runat="server" Text=" 全選"/>
</itemtemplate>
</asp:TemplateField>
◆接者請在該頁面的最底部加上以下的Java Script
<script type="text/javascript">
function SelectAllCheckboxes(spanChk)
{
elm=document.forms[0];
for(i=0;i<= elm.length -1;i++)
{
if(elm[i].type=="checkbox" && elm[i].id!=spanChk.id)
{
if(elm.elements[i].checked!=spanChk.checked)
elm.elements[i].click();
}
}
}
</script>
★注意事項:如果您的頁面有套用MasterPage請將上方JS放在標籤上面
?小鋪廢言:到這裡就已經完成了全選和取消全選的功能了,您可以自行測試看看,再來我們要製作修改的部份(你總不會做出全選/取消的功能只是讓使用者按好玩的吧)
◆接者在頁面上放置一個按鈕(Button),對按鈕點兩下,切換到程式部份
◆切換到程式部份後我們利用以下code去抓出哪些列(ROW)有被打勾
int i;
for (i = 0; i < this.GridView1.Rows.Count; i++)
{
if (((CheckBox)GridView1.Rows[i].FindControl("CheckBox2")).Checked)
{
Response.Write(GridView1.DataKeys[i].Value.ToString());
//GridView1.DataKeys[i].Value.ToString() 可以抓到該列的DataKeys的值,我設定的是pk值
}
}
★注意事項:如果您的GridVie沒有設定 DataKeyNames="資料欄位"那上方的code就列不出pk值唷
?小鋪廢言:利用以上方式您就可以準確的抓出哪些列有被使用者打勾,來作其他您要執行的程式了
網友回應
- joan

- 發表於: 2011-08-03
- 您好,非常感謝您這篇文章,使我受益良多,但是想請問,為何我
(((CheckBox)GridView1.Rows[i].FindControl("CheckBox2")).Checked)這一行都是false呢?? -
你確定你的GridView 名稱為 GridView1
CheckBox 名稱為 CheckBox2
先確定一下吧
回覆於: 2011-08-03
- 白皮

- 發表於: 2011-05-10
- 謝謝分享,太好用了! 另外可以稍微改良一下,因為用forms[0]的話,會對整個頁面上全部的Checkbox都作用,如果想要指定某一個GridView的話,可以改寫成下面這樣,不影響頁面上其它的勾勾 function SelectAllCheckboxes(spanChk) { // elm = document.forms[0]; range = document.getElementById("GridView2"); elm = range.getElementsByTagName("input"); for (i = 0; i <= elm.length - 1; i++) { if (elm[i].type == "checkbox" && elm[i].id != spanChk.id) { if (elm[i].checked != spanChk.checked) elm[i].click(); } } }
- King

- 發表於: 2011-01-14
- for(i=0;i) ========================================== for(i=0;i<= elm.length -1;i++) ﹉▽﹉||
- Joy

- 發表於: 2010-04-09
- 好像是這行錯了 for(i=0;i) 沒寫完?
- Jim

- 發表於: 2010-03-11
- SelectAllCheckboxes() 中有地方寫錯了, 改一下吧...
-
因為你沒有說明哪裡有錯,所以我改了一下我看到的部份,希望是你說的
回覆於: 2010-03-11