利用ASP.NET的HiddenField記錄GridView的CheckBox狀態,並且加入全選、取消全選、分頁保留CheckBox狀態,達到類似Gmail的郵件清單功能
最近在小舖看到很多在討論GridView的CheckBox何如做全選或取消全選的動作,甚至分頁保留CheckBox狀態的功能
以上功能如果全都有了,就很類似Gmail的郵件清單功能了..所以小弟寫了一個很笨的方法來達到此功能....
p.s.如有Bug請多多指教
首先準備一個資料庫,欄位如下
id(int自動編號),name(nvarchar(50)),tel(nvarchar(50))
1,puma,1234567
2,hent,2345678
,,,,,,,
c#範例
GridViewPage_CS.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewPage_CS.aspx.cs"
02 Inherits="GridViewPage_CS" %>
03
04 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head id="Head1" runat="server">
07 <title>未命名頁面</title>
08 </head>
09 <body>
10 <form id="form1" runat="server">
11 <div>
12 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
13 DataKeyNames="id" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound"
14 PageSize="5">
15 <Columns>
16 <asp:TemplateField>
17 <ItemTemplate>
18 <asp:CheckBox ID="ckbID" runat="server" AutoPostBack="True" OnCheckedChanged="ckbID_CheckedChanged" />
19 <asp:HiddenField ID="HidID" runat="server" Value='<%# Eval("id") %>' />
20 </ItemTemplate>
21 <HeaderTemplate>
22 <asp:LinkButton ID="linkbtnAll" runat="server" OnClick="linkbtnAll_Click">全選</asp:LinkButton>
23 <asp:LinkButton ID="linkbtnNo" runat="server" OnClick="linkbtnNo_Click">無</asp:LinkButton>
24 </HeaderTemplate>
25 </asp:TemplateField>
26 <asp:TemplateField HeaderText="name" SortExpression="name">
27 <ItemTemplate>
28 <asp:Label ID="lblName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
29 </ItemTemplate>
30 </asp:TemplateField>
31 <asp:TemplateField HeaderText="tel" SortExpression="tel">
32 <ItemTemplate>
33 <asp:Label ID="lblTel" runat="server" Text='<%# Bind("tel") %>'></asp:Label>
34 </ItemTemplate>
35 </asp:TemplateField>
36 </Columns>
37 </asp:GridView>
38 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
39 SelectCommand="SELECT * FROM [user]"></asp:SqlDataSource>
40 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="查看選取項目" />
41 <asp:HiddenField ID="hidAll" runat="server" />
42 </div>
43 </form>
44 </body>
45 </html>
46
02 Inherits="GridViewPage_CS" %>
03
04 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head id="Head1" runat="server">
07 <title>未命名頁面</title>
08 </head>
09 <body>
10 <form id="form1" runat="server">
11 <div>
12 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
13 DataKeyNames="id" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound"
14 PageSize="5">
15 <Columns>
16 <asp:TemplateField>
17 <ItemTemplate>
18 <asp:CheckBox ID="ckbID" runat="server" AutoPostBack="True" OnCheckedChanged="ckbID_CheckedChanged" />
19 <asp:HiddenField ID="HidID" runat="server" Value='<%# Eval("id") %>' />
20 </ItemTemplate>
21 <HeaderTemplate>
22 <asp:LinkButton ID="linkbtnAll" runat="server" OnClick="linkbtnAll_Click">全選</asp:LinkButton>
23 <asp:LinkButton ID="linkbtnNo" runat="server" OnClick="linkbtnNo_Click">無</asp:LinkButton>
24 </HeaderTemplate>
25 </asp:TemplateField>
26 <asp:TemplateField HeaderText="name" SortExpression="name">
27 <ItemTemplate>
28 <asp:Label ID="lblName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
29 </ItemTemplate>
30 </asp:TemplateField>
31 <asp:TemplateField HeaderText="tel" SortExpression="tel">
32 <ItemTemplate>
33 <asp:Label ID="lblTel" runat="server" Text='<%# Bind("tel") %>'></asp:Label>
34 </ItemTemplate>
35 </asp:TemplateField>
36 </Columns>
37 </asp:GridView>
38 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
39 SelectCommand="SELECT * FROM [user]"></asp:SqlDataSource>
40 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="查看選取項目" />
41 <asp:HiddenField ID="hidAll" runat="server" />
42 </div>
43 </form>
44 </body>
45 </html>
46
GridViewPage_CS.aspx.cs
001 
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;
002
003
public partial class GridViewPage_CS : System.Web.UI.Page
004
{
005
protected void Page_Load(object sender, EventArgs e)
006
{
007
008
}
009
010 //checkbox改變
011
protected void ckbID_CheckedChanged(object sender, EventArgs e)
012
{
013
CheckBox ckb = sender as CheckBox;
014
015 if (ckb.Checked == true)
016
{
017
this.hidAll.Value += ((HiddenField)ckb.Parent.FindControl("HidID")).Value + ",";
018
}
019
else
020
{
021
string[] param = this.hidAll.Value.Split(new char[] { ',' } , StringSplitOptions.RemoveEmptyEntries);
022
023 this.hidAll.Value = "";
024
025 foreach (string item in param)
026
{
027
if (item != ((HiddenField)ckb.Parent.FindControl("HidID")).Value)
028
{
029
this.hidAll.Value += item + ",";
030
}
031
}
032
}
033
}
034
035 //查看選取項目
036
protected void Button1_Click(object sender, EventArgs e)
037
{
038
Response.Write(this.hidAll.Value);
039
}
040
041 //checkbox綁定
042
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
043
{
044
if (e.Row.RowType== DataControlRowType.DataRow)
045
{
046
string[] param = this.hidAll.Value.Split(new char[] { ','} , StringSplitOptions.RemoveEmptyEntries);
047
048 foreach (string item in param)
049
{
050
if (item == ((HiddenField)e.Row.Cells[0].FindControl("HidID")).Value)
051
{
052
((CheckBox)e.Row.Cells[0].FindControl("ckbID")).Checked = true;
053
break;
054
}
055
}
056
}
057
}
058
059 //checkbox全選
060
protected void linkbtnAll_Click(object sender, EventArgs e)
061
{
062
string[] param = this.hidAll.Value.Split(new char[] { ',' } , StringSplitOptions.RemoveEmptyEntries);
063
064 int cnt;
065
066 foreach (GridViewRow item in this.GridView1.Rows)
067
{
068
cnt = 0;
069
foreach (string str in param)
070
{
071
if (((HiddenField)item.Cells[0].FindControl("HidID")).Value == str)
072
{
073
cnt++;
074
}
075
}
076
077 if (cnt == 0)
078
{
079
this.hidAll.Value += ((HiddenField)item.Cells[0].FindControl("HidID")).Value+",";
080
}
081
}
082
083 this.DataBind();
084
}
085
086 //checkbox取消全選
087
protected void linkbtnNo_Click(object sender, EventArgs e)
088
{
089
string[] param = this.hidAll.Value.Split(new char[] { ',' } , StringSplitOptions.RemoveEmptyEntries);
090
091 int cnt;
092
093 foreach (GridViewRow item in this.GridView1.Rows)
094
{
095
for (int i = 0; i < param.Length; i++)
096
{
097
if (((HiddenField)item.Cells[0].FindControl("HidID")).Value == param[i])
098
{
099
param[i] = "";
100
}
101
}
102
}
103
104 this.hidAll.Value = "";
105
106 for (int i = 0; i < param.Length; i++)
107
{
108
if (param[i] != "")
109
{
110
this.hidAll.Value += param[i] + ",";
111
}
112
}
113
114 this.DataBind();
115
}
116
}
117


002

003

004

005

006

007

008

009

010 //checkbox改變
011

012

013

014

015 if (ckb.Checked == true)
016

017

018

019

020

021

022

023 this.hidAll.Value = "";
024

025 foreach (string item in param)
026

027

028

029

030

031

032

033

034

035 //查看選取項目
036

037

038

039

040

041 //checkbox綁定
042

043

044

045

046

047

048 foreach (string item in param)
049

050

051

052

053

054

055

056

057

058

059 //checkbox全選
060

061

062

063

064 int cnt;
065

066 foreach (GridViewRow item in this.GridView1.Rows)
067

068

069

070

071

072

073

074

075

076

077 if (cnt == 0)
078

079

080

081

082

083 this.DataBind();
084

085

086 //checkbox取消全選
087

088

089

090

091 int cnt;
092

093 foreach (GridViewRow item in this.GridView1.Rows)
094

095

096

097

098

099

100

101

102

103

104 this.hidAll.Value = "";
105

106 for (int i = 0; i < param.Length; i++)
107

108

109

110

111

112

113

114 this.DataBind();
115

116

117