gridview checkbox從服務器端和客戶端兩個方面實現全選和反選

2020-01-18 00:17:39

字體：大中小

來源：轉載

供稿：網友

GridView中的checkbox的全選和反選在很多的地方都是要求實現的，所以下面就從服務器端和客戶端兩個方面實現了checkbox的選擇。
1.服務器端：
html代碼如下：

 
<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> 
其中關于數據的獲取不是重點，所以就選擇了使用sqldatasource控件來實現數據的獲取。 GridView中使用了BoundField綁定了ID,num這兩個數據表的字段。在上面的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的部分是單個的checkbox部分。 (請注意AutoPostBack要設置為true，要不然無法觸動服務器端的代碼)
具體的后臺的代碼：

復制代碼代碼如下:

 
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; 
} 
} 

運行頁面以后，可以看到點擊全選的checkbox,可以選擇全部。取消了全選的checkbox，那所以的checkbox也取消選中。如果單個的checkbox全選中一個，那全選的checkbox也選中。如果有一個單個的checkbox沒有選中，那全選的checkbox也不選中。
下面來說說客戶端的實現:
html代碼部分，請去除掉兩個checkbox的OnCheckedChanged和AutoPostBack。其他的不變。

復制代碼代碼如下:

 
<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> 