JavaScript实现DataGrid中的CheckBox全选与否

原创 2006年05月21日 10:43:00
 

(一).功能

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

           <ItemTemplate>            //项模板代码
                   <asp:CheckBox id="chkItem" runat="server"></asp:CheckBox>
           </ItemTemplate>

        </Columns>

2.  在当页加入:

  <script language="javascript">
       function SelectAll(tempControl)
       {
           //将除头模板中的其它所有的CheckBox取反 

            var theBox=tempControl;
             xState=theBox.checked;   

            elem=theBox.form.elements;
            for(i=0;i<elem.length;i++)
            if(elem[i].type=="checkbox" && elem[i].id!=theBox.id)
             {
                  if(elem[i].checked!=xState)
                        elem[i].click();
            }
  }  
</script>

WPF DataGrid表头Checkbox 全选与全反选

WPF 在使用DataGrid展示数据的时候经常会使用到checkbox列,特别是id列     例如下面这种效果:          WPF 要实现DataGrid checkbox全选与全反选,方...
  • aojiancc2
  • aojiancc2
  • 2017年02月09日 16:12
  • 2693

EasyUI入门2 datagrid复选框全选效果(通过约束条件实现部分项参与的全选效果)

datagrid如果有一些项因为约束条件(比如这一项需要显示出来,但是复选框是disable的),那么在点击全选或全否复选框的时候,这些状态是disable的行是不应该被选中的...
  • xiangcns
  • xiangcns
  • 2017年06月26日 08:40
  • 1916

WPF中DataGrid实现全选

方法一:使用模板列 前台代码如下 后台实现如下  DataGridTemplateColumn templeColum...
  • asciil
  • asciil
  • 2016年11月22日 21:18
  • 1386

Flex中DataGrid实现列(包括头部)中加入CheckBox全选功能 几种实现方法

 在DataGrid中实现列中加入CheckBox这种用法很常见,项目中也经常会用到,在网上搜了下基本就是实现itemRender.但是 感觉网上提供的实现上好些地方都是多余的 经过自己的改造感...
  • u011589095
  • u011589095
  • 2014年08月14日 14:53
  • 1103

WPF中DataGrid 添加checkbox实现全选、多选

在机房合作项目中,有一个窗体是这样子的               简单介绍一下:就是通过查询出正在上机的学生,可以通过勾选前面的checkbox,选中该行,然后可以进行部分下机和全部下机。如...
  • kwy15732621629
  • kwy15732621629
  • 2016年07月26日 14:41
  • 6876

easyui datagrid checkbox初始化某几行disabled时,点击全选还是可以选择 解决办法

$("#body_feetotal").datagrid({ method: "get", pagination: true, ...
  • QQ38397892
  • QQ38397892
  • 2015年05月15日 17:22
  • 10146

WPF中DataGrid中的DataGridCheckBoxColumn用法(全选,全否,反选)

check datagrid wpf
  • qq_31971935
  • qq_31971935
  • 2015年11月02日 10:59
  • 3419

easyui中checkbox全选全不选的时不处理最后一行的实现

有这样一个需求, easyui加载datagrid后, 最后一行为统计行, 在进行全选全不选的时候会将统计行也一并选择, 这跟业务不相符, 琢磨了半天后终于找到了解决方案 1.首先记录下统计功能的实...
  • m0_37609579
  • m0_37609579
  • 2017年04月01日 09:57
  • 823

js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下: Document 你的呢爱好很广泛!! 全选/全不选 足球 篮球 游泳 唱歌 ...
  • sinat_21206105
  • sinat_21206105
  • 2016年09月01日 21:13
  • 8239

AngularJS 实现复选框 全选/取消全选

第一次写博客,也是把自己所学习的知识记录下来,以便以后查找。
  • Jason_Kennan
  • Jason_Kennan
  • 2016年12月28日 13:12
  • 3850
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现DataGrid中的CheckBox全选与否
举报原因:
原因补充:

(最多只允许输入30个字)