JavaScript实现DataGrid中添加CheckBox列(全选与否)

最新推荐文章于 2020-10-20 19:14:46 发布
原创 最新推荐文章于 2020-10-20 19:14:46 发布 · 1.2w 阅读 · 15 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #datagrid #asp #function #server #c#

本文介绍了如何使用JavaScript在DataGrid中添加CheckBox，并实现全选和全消功能，避免了回发到服务器，提高了效率。主要代码包括在DataGrid的HeaderTemplate和ItemTemplate中添加CheckBox，以及客户端JavaScript函数`SelectAll`来切换所有CheckBox的状态。在后台，可以通过遍历DataGrid的Items获取CheckBox的选中状态进行进一步操作。

(一).功能

    1. JavaScript检索CheckBox并实现全选和全消功能

         用C#等写的CheckBox需要回发到服务端执行，
         而用JavaScript可以在直接客户端实现,效率高些

(二).代码

       1. DataGrid中的代码主要片段:

        <Columns>

            <HeaderTemplate>       //头模板代码
                   <asp:CheckBox id="chkHeader" runat="server" AutoPostBack="False"   //AutoPostBack设为假，不需要回发

                            onclick="javascript:SelectAll(this);"></asp:CheckBox>
    &nbs

最低0.47元/天 解锁文章
在DataGrid中使用CheckBox，实现全选功能
03-14
NULL 博文链接：https://taomujian.iteye.com/blog/294748
利用Bootstrap实现表格复选框checkbox全选
08-31
在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
DataGrid列中加入CheckBox 全选 点击Header全选 和 只操作选中部分 功能的实现
aaa002002的博客
03-12 141
先写个效果 中午接着写 反正没人看 只是给自己记录 转载于:https://www.cnblogs.com/Early-Bird/p/4331483.html
JSite 框架下的dataGrid组件中开启复选框
qq_42196643的博客
10-20 472
1、给 dataGrid 组件设置属性 showCheckbox: true 显示复选框 2、然后调用 var ids = $('#dataGrid').dataGrid('getSelectRows'); //获取选中行
修改column.js文件，做是否值为复选框
liuyangan2008的专栏
01-17 891
修改checkColumn.js文件 /*!  * Ext JS Library 3.1.1  * Copyright(c) 2006-2010 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.ns('Ext.ux.grid');/**  * @class Ext.ux.grid.
EasyUI_dataGrid
yangxu19992的博客
04-20 765
数据表格属性： $(function (){ $("#ID").datagrid({ url:basePath+"",//远程站点请求数据的地址 loadMsg:"加载数据中...",//载入数据时显示的一条快捷信息 method:"post",//请求远程数据的方法类型 rownumbers:boolean,//true显示行数 singleSelect:boolean,//tru
实现DataGrid与AdvancedDataGrid中CheckBox全选功能的方法
博文链接“https://yunzhongxia.iteye.com/blog/652902”提供了关于如何在DataGrid和AdvancedDataGrid中实现CheckBox全选功能的具体实现方式。该博文很可能是基于某个具体的编程语言或框架（如Flex/ActionScript），...
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
11-28
本文实例讲述了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法。分享给大家供大家参考，具体如下： 方法很简单，我们只需要在数据加载成功后的事件中处理即可。具体代码如下所示： //事件 onLoadSuccess:...
三种方式实现checkbox全选，反选
09-27
以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...
Winforms里判断DatagridView里面的CheckBox是否选中
06-30
判断DatagridView里面的CheckBox是否选中，如果选中，启用另一控件。如果取消选中，则不启用。以及全选和反选的代码。
新手学EasyUI（七）----DataGrid CheckBox 动态选中
weixin_33691817的博客
11-10 313
先上一张图： 下面说一下具体实现的功能是什么样的。 页面首次加载的时候，右面的表格中的CheckBox都处于未选中的状态，现在是这么设计的，时段只有这么8条数据在一张单独的表里面。 用户和时段的关系放在另一张表中，当点击左侧具体的用户的时候，根据表中的关系，勾选右侧DataGrid中与之对应的数据。这就是要实现的功能。 具体...
jQuery EasyUI DataGrid Checkbox 数据设定与取值
架构设计
07-14 847
纯粹做个记录，以免日后忘记该怎么设定。 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式，以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Checked，另外就是两种 Checkbox 设定方式下如何取得有勾选的数据。 有关 jQuery EasyUI DataGrid 的相关资料，可以前往...
Javascript实现在DataGrid上的CheckBox全选和取消
mib23的专栏
04-14 1195
(本文适用与.Net 1.1)1.         用C#等写的CheckBox需要回发到服务端执行，  而用JavaScript可以在直接客户端实现,效率高些  2.  DataGrid中的代码主要片段:                                                          //头模板代码                            
DataGrid中CheckBox操作
鲁班学艺
04-24 955
 一、实现全选或多选，并将ID值记入到控件hFlatID中   1、记录ID值的控件：           2、DataGrid代码：        <asp:DataGrid ID="dg" runat="server" Width="100%" AutoGenerateColumns="False" AllowPaging="True"
javascript实现datagrid客户端checkbox列的全选,反选
weixin_34061042的博客
12-18 171
最简格式：这是一个偷巧的方法，但不通用。前提是这个页面只有一个datagrid，且只有datagrid中有checkbox；这个就比较方便。主要思路就是搜索出整个页面的checkbox，将它们全部选中或反选。 // 全选 function allCheck() { for (var i=0;i&lt;Form1.elements.length;i++) { var e=Form1.elements...
DataGrid中加入CheckBox,并实现单选
星辰的雨
10-08 1201
   WebForm1        http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">       function SetCheckBoxState()     {     var dom=document.all;     var el=event.srcElement;        if(el.ta
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值