gridviewcheckbox从服务器端和客户端两个方面实现全选和反选
客户端 实现 两个 服务器端 方面 全选 反选
2023-06-13 09:14:44 时间
GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择。
1.服务器端:
html代码如下:
复制代码代码如下:
1.服务器端:
html代码如下:
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"
DataKeyNames="ID"DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBoxID="CheckAll"runat="server"OnCheckedChanged="CheckAll_CheckedChanged"AutoPostBack="true"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBoxID="CheckBox1"runat="server"AutoPostBack="true"OnCheckedChanged="CheckBox1_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundFieldDataField="ID"HeaderText="ID"InsertVisible="False"
ReadOnly="True"SortExpression="ID"/>
<asp:BoundFieldDataField="num"HeaderText="num"SortExpression="num"/>
</Columns>
</asp:GridView>
其中关于数据的获取不是重点,所以就选择了使用sqldatasource控件来实现数据的获取。GridView中使用了BoundField绑定了ID,num这两个数据表的字段。在上面的HTML代码中,使用了模板列
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBoxID="CheckAll"runat="server"OnCheckedChanged="CheckAll_CheckedChanged"AutoPostBack="true"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBoxID="CheckBox1"runat="server"AutoPostBack="true"OnCheckedChanged="CheckBox1_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
header部分是全选的checkbox,item的部分是单个的checkbox部分。(请注意AutoPostBack要设置为true,要不然无法触动服务器端的代码)
具体的后台的代码:
protectedvoidCheckAll_CheckedChanged(objectsender,EventArgse)
{
CheckBoxck=senderasCheckBox;
if(ck!=null)
{
System.Web.UI.WebControls.GridViewg=ck.NamingContainer.NamingContainerasSystem.Web.UI.WebControls.GridView;
for(Int32i=0;i<g.Rows.Count;i++)
{
(g.Rows[i].FindControl("CheckBox1")asCheckBox).Checked=ck.Checked;
}
}
}
protectedvoidCheckBox1_CheckedChanged(objectsender,EventArgse)
{
varcount=0;
CheckBoxck=senderasCheckBox;
if(ck!=null)
{
System.Web.UI.WebControls.GridViewg=ck.NamingContainer.NamingContainerasSystem.Web.UI.WebControls.GridView;
for(Int32i=0;i<g.Rows.Count;i++)
{
if((g.Rows[i].FindControl("CheckBox1")asCheckBox).Checked)
{
count++;
}
}
(g.HeaderRow.FindControl("CheckAll")asCheckBox).Checked=count==g.Rows.Count;
}
}
运行页面以后,可以看到点击全选的checkbox,可以选择全部。取消了全选的checkbox,那所以的checkbox也取消选中。如果单个的checkbox全选中一个,那全选的checkbox也选中。如果有一个单个的checkbox没有选中,那全选的checkbox也不选中。
下面来说说客户端的实现:
html代码部分,请去除掉两个checkbox的OnCheckedChanged和AutoPostBack。其他的不变。
<scripttype="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>
相关文章
- java handlersocket_HandlerSocket java客户端「建议收藏」
- Java创建WebService服务及客户端实现
- 实现配置中心和配置客户端的服务化
- nio实现网络多客户端聊天室
- 用Redis客户端工具连接Redis
- C-socket编程,实现客户端与服务端通信(服务端)
- 使用了不到200行的核心代码就实现了一个美轮美奂的Redis客户端
- Redis发布订阅和实现.NET客户端详解
- Oracle 11g 客户端的安装和配置的图文教程
- 连接Linux服务器的客户端实现(连接linux客户端)
- MySQL的多客户端支持:一个安全可靠的实现(多客户端mysql)
- 客户端架构设计的简单总结(转)详解编程语言
- 使用MySQL Web客户端管理数据库(mysqlweb客户端)
- 架构深入探索Oracle服务器客户端架构(oracle服务器客户端)
- 升级新版斗鱼客户端看直播风扇猛转?因为它会“有奖挖矿”
- 安装MySQL客户端:一步一步指导(安装mysql客户端)
- 便利高效的MSSQL客户端软件:管理数据库轻松搞定(mssql客户端软件)
- 让花生壳帮助Linux体验更加便捷(花生壳linux客户端)
- MySQL实现CPC客户端的自动化部署(cpc客户端 mysql)
- 使用Python快速轻松构建Redis客户端(简单实现redis客户端)
- 解锁新空间第三方客户端Redis(第三方客户端redis)
- 从MySQL分批传输至客户端AJAX解决方案(ajax分批mysql)
- Redis实现高性能分布式客户端(redis 高并发客户端)
- Redis实现快速获取客户端数量(redis获取客户端数量)
- Oracle 8客户端安装实现方便快捷的连接体验(oracle8客户端安装)
- Oracle 32客户端实现企业数据管理提升(oracle 32客户端)
- Oracle 21为你准备了客户端助力(oracle21有客户端吗)
- asp.net客户端浏览器缓存的Http头介绍
- 禁用aspx页面的客户端缓存(防止页面被修改)
- 用客户端js实现带省略号的分页
- c#socket编程udp客户端实现代码分享
- c#多线程网络聊天程序代码分享(服务器端和客户端)
- Nodejs实现的一个简单udp广播服务器、客户端