GridView中的checkbox的全選和反選在很多的地方都是要求實(shí)現(xiàn)的，所以下面就從服務(wù)器端和客戶(hù)端兩個(gè)方面實(shí)現(xiàn)了checkbox的選擇。
1.服務(wù)器端：
html代碼如下：
復(fù)制代碼 代碼如下:
asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" DataSourceID="SqlDataSource1">
Columns>
asp:TemplateField>
HeaderTemplate>
asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" />
/HeaderTemplate>
ItemTemplate>
asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
/ItemTemplate>
/asp:TemplateField>
asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" />
asp:BoundField DataField="num" HeaderText="num" SortExpression="num" />
/Columns>
/asp:GridView>
其中關(guān)于數(shù)據(jù)的獲取不是重點(diǎn)，所以就選擇了使用sqldatasource控件來(lái)實(shí)現(xiàn)數(shù)據(jù)的獲取。 GridView中使用了BoundField綁定了ID,num這兩個(gè)數(shù)據(jù)表的字段。在上面的HTML代碼中，使用了模板列
asp:TemplateField>
HeaderTemplate>
asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" />
/HeaderTemplate>
ItemTemplate>
asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
/ItemTemplate>
/asp:TemplateField>
header部分是全選的checkbox，item的部分是單個(gè)的checkbox部分。 (請(qǐng)注意AutoPostBack要設(shè)置為true，要不然無(wú)法觸動(dòng)服務(wù)器端的代碼)
具體的后臺(tái)的代碼：
復(fù)制代碼 代碼如下:
protected void CheckAll_CheckedChanged(object sender,EventArgs e)
{
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = 0; i g.Rows.Count; i++)
{
(g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked = ck.Checked;
}
}
}
protected void CheckBox1_CheckedChanged(object sender,EventArgs e)
{
var count = 0;
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = 0; i g.Rows.Count; i++)
{
if ((g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked)
{
count++;
}
}
(g.HeaderRow.FindControl("CheckAll") as CheckBox).Checked =count==g.Rows.Count;
}
}
運(yùn)行頁(yè)面以后，可以看到點(diǎn)擊全選的checkbox,可以選擇全部。取消了全選的checkbox，那所以的checkbox也取消選中。如果單個(gè)的checkbox全選中一個(gè)，那全選的checkbox也選中。如果有一個(gè)單個(gè)的checkbox沒(méi)有選中，那全選的checkbox也不選中。
下面來(lái)說(shuō)說(shuō)客戶(hù)端的實(shí)現(xiàn):
html代碼部分，請(qǐng)去除掉兩個(gè)checkbox的OnCheckedChanged和AutoPostBack。其他的不變。
復(fù)制代碼 代碼如下:
script type="text/javascript">
$(function() {
$("#GridView1 :checkbox").eq(0).click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().nextAll().find(":checkbox").attr("checked", "checked");
}
else {
$(this).parent().parent().nextAll().find(":checkbox").removeAttr("checked");
}
});
$("#GridView1 :checkbox").not($("#GridView1 :checkbox:first")).click(function() {
if ($(this).is(":checked")) {
if ($("#GridView1 :checked").length == $("#GridView1 :checkbox").length - 1) {
$("#GridView1 :checkbox").eq(0).attr("checked", "checked");
}
}
else {
$("#GridView1 :checkbox").eq(0).removeAttr("checked");
}
});
});
/script>
您可能感興趣的文章:- GridView中加上CheckBox 的全選功能的代碼
- Gridview使用CheckBox全選與單選采用js實(shí)現(xiàn)同時(shí)高亮顯示選擇行
- ASP.NET Gridview與checkbox全選、全不選實(shí)現(xiàn)代碼
- asp.net GridView控件中模板列CheckBox全選、反選、取消
- asp.net gridview中用checkbox全選的幾種實(shí)現(xiàn)的區(qū)別
- GridView中checkbox"全選/取消"完美兼容IE和Firefox
