码迷,mamicode.com
首页 > 其他好文 > 详细

gridview checkbox从服务器端和客户端两个方面实现全选和反选

时间:2015-06-25 19:26:28      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:

GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下,希望本文对你有所帮助

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

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

运行页面以后,可以看到点击全选的checkbox,可以选择全部。取消了全选的checkbox,那所以的checkbox也取消选中。如果单个的checkbox全选中一个,那全选的checkbox也选中。如果有一个单个的checkbox没有选中,那全选的checkbox也不选中。 

2.客户端的实现

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

3.普通的html界面的全选与反选

技术分享
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        //复选框事件  
        //全选、取消全选的事件  
        function selectAll() {
            if ($("#SelectAll").attr("checked")) {
                $(":checkbox").attr("checked", true);
            } else {
                $(":checkbox").attr("checked", false);
            }
        }
        //子复选框的事件  
        function setSelectAll() {
            //当没有选中某个子复选框时,SelectAll取消选中  
            if (!$("#subcheck").checked) {
                $("#SelectAll").attr("checked", false);
            }
            var chsub = $("input[type=‘checkbox‘][id=‘subcheck‘]").length; //获取subcheck的个数  
            var checkedsub = $("input[type=‘checkbox‘][id=‘subcheck‘]:checked").length; //获取选中的subcheck的个数  
            if (checkedsub == chsub) {
                $("#SelectAll").attr("checked", true);
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" id="SelectAll" value="全选" onclick="selectAll();" />
    <input type="checkbox" id="subcheck" value="1" onclick="setSelectAll();" />
    <input type="checkbox" id="subcheck" value="2" onclick="setSelectAll();" />
    <input type="checkbox" id="subcheck" value="3" onclick="setSelectAll();" />
    <input type="checkbox" id="subcheck" value="4" onclick="setSelectAll();" />  
</body>
</html>
View Code

 

gridview checkbox从服务器端和客户端两个方面实现全选和反选

标签:

原文地址:http://www.cnblogs.com/caishuhua226/p/4600424.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!