给DataGrid中前添加CheckBox,全选和全不选问题,经典解决方案.

本文详细介绍了如何在DataGrid中实现全选功能,通过在头部添加CheckBox,并使用JavaScript进行事件绑定,使得点击头部CheckBox可以控制所有行内CheckBox的状态,同时提供了两种不同的实现方式。
摘要由CSDN通过智能技术生成

在head里添加js

  <script language="JavaScript">  
   function Selectallup(opt)  
   {    
    var c = document.Form1;  
                for(var i=0;i<c.elements.length;i++)  
                {    
     var box=c.elements.elements[i]                        
     box.checked=opt.checked;  
                }  
   }  
  </script>

DataGrid中html代码.

<asp:datagrid id="DataGrid1" runat="server" Width="100%" BorderWidth="1px" AutoGenerateColumns="False">
                <AlternatingItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></AlternatingItemStyle>
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>
                <Columns>
                 <asp:TemplateColumn>
                  <ItemStyle Width="3%"></ItemStyle>
                  <HeaderTemplate>
                   <asp:CheckBox id="Checkbox2" runat="server" οnclick="Selectallup(this)"></asp:CheckBox>
                  </HeaderTemplate>
                  <ItemTemplate>
                   <asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>
                  </ItemTemplate>
                 </asp:TemplateColumn>
                 <asp:BoundColumn DataField="ZPRBMMC" ReadOnly="True" HeaderText="部门">
                  <ItemStyle Width="10%"></ItemStyle>
                 </asp:BoundColumn>
                 <asp:BoundColumn DataField="ZYGGH" ReadOnly="True" HeaderText="工号">
                  <ItemStyle Width="10%"></ItemStyle>
                 </asp:BoundColumn>

                </Columns>

</asp:datagrid>

 ===========================================================================

<script type="text/javascript">
    function checkAll() {
        var code_Values = document.getElementsByTagName("input");
        for (i = 0; i < code_Values.length; i++) {
            if (code_Values[i].type == "checkbox") {
                code_Values[i].checked = true;
            }
        }
    }
    function uncheckAll() {
        var code_Values = document.getElementsByTagName("input");
        for (i = 0; i < code_Values.length; i++) {
            if (code_Values[i].type == "checkbox") {
                code_Values[i].checked = false;
            }
        }
    }
  </script>

<table align="center" style="width:750px;" cellpadding="0" cellspacing="1" class="list">
   <thead>
        <tr  class="content_tr_header">
            <td width="15%">&nbsp;<a href="javascript:;" οnclick="checkAll();">全选</a>/<a href="javascript:;" οnclick="uncheckAll();">全不选</a></td>
            <td width="25%">&nbsp;预算科目编号</td>
            <td width="50%">&nbsp;预算科目名称</td>
            <td width="10%">&nbsp;是否显示</td>
        </tr>
    </thead>
    <tbody>
        <asp:Repeater ID="rptCostSubjectList" runat="server">
            <ItemTemplate>
            <tr class="list_body">
                <td>&nbsp;<asp:CheckBox ID="cb1" runat="server" Checked='<%# (Int32)Eval("State") == 1 ? true : false %>' />
                <asp:TextBox ID="txtID" runat="server" Text='<%# Eval("ID")%>' style="display:none;"></asp:TextBox></td>
                <td>&nbsp;<%#Eval("SAKNR")%></td>
                <td>&nbsp;<%# Eval("TXT50")%></td>
                <td>&nbsp;<%# (Int32)Eval("State") == 1 ? "是" : "否" %></td>
            </tr>
            </ItemTemplate>
        </asp:Repeater>
       
    </tbody>
    <tfoot>
        <tr>
            <td align="right" colspan="4">
                <uc1:UC_GetRecordsByPage ID="ucPager" runat="server" />
            </td>
        </tr>
    </tfoot>
</table>

 

转载于:https://www.cnblogs.com/qfb620/archive/2009/02/09/1386928.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值