1. 程式人生 > >asp.net gridview中新增checkbox列,用於全部選中記錄或取消全選

asp.net gridview中新增checkbox列,用於全部選中記錄或取消全選

方法一:使用javascript程式碼控制

                         前臺程式碼:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">   
    <Columns>
        <asp:TemplateField >
           <HeaderTemplate>
                <asp:CheckBox ID="chkHeader" runat="server" onclick="doSelect(this,'GridView1');"/>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="No" > 
            <ItemTemplate><%#Container.DataItemIndex + 1%>
           </ItemTemplate> 
           <ItemStyle HorizontalAlign="Center"  />
        </asp:TemplateField>        
    </Columns>
    <HeaderStyle CssClass="dvHeader"  />
</asp:GridView>
                         後臺程式碼:
    <script language="javascript" type="text/javascript"> 
         function doSelect(obj,src){   
               //var dom=document.all;   
               //var el=event.srcElement;   
                 var dom = document.getElementById(src).getElementsByTagName("INPUT");  
         var el = obj;
               if(el.id.indexOf("chkHeader")>=0&&el.tagName=="INPUT"&&el.type.toLowerCase()=="checkbox")
               {   
                  var   ischecked=false;   
                  if(el.checked)   
                  ischecked=true;   
                  for(i=0;i<dom.length;i++)
                  {   
                    if (dom[i].type ==undefined) continue ;
                        if(dom[i].id.indexOf("chkSelect")>=0&&dom[i].tagName=="INPUT"&&dom[i].type.toLowerCase()=="checkbox")   
                        dom[i].checked=ischecked;
                  }   
               }
            }
    </script> 
              方法二:在後臺編寫程式碼並繫結事件

                         前臺程式碼:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">   
     <Columns>
         <asp:TemplateField >
            <HeaderTemplate>
                 <asp:CheckBox ID="chkHeader" runat="server" AutoPostBack ="true" OnCheckedChanged ="chkHeader_CheckedChanged"/>
             </HeaderTemplate>
             <ItemTemplate>
                 <asp:CheckBox ID="chkSelect" runat="server" />
             </ItemTemplate>
             <ItemStyle HorizontalAlign="Center" />
         </asp:TemplateField>
         <asp:TemplateField HeaderText="No" > 
             <ItemTemplate><%#Container.DataItemIndex + 1%>
            </ItemTemplate> 
            <ItemStyle HorizontalAlign="Center"  />
         </asp:TemplateField>         
     </Columns>
     <HeaderStyle CssClass="dvHeader"  />
</asp:GridView>
                             後臺程式碼:
    ''' <summary>
    ''' 全選/反選
    ''' </summary>
    ''' <param name="sender"></param>
    ''' <param name="e"></param>
    ''' <remarks></remarks>
    Protected Sub chkHeader_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        For i As Integer = 0 To Me.GridView1.Rows.Count - 1
            If CType(Me.GridView1.Rows(i).Cells(0).FindControl("chkSelect"), CheckBox).Enabled Then
                CType(Me.GridView1.Rows(i).Cells(0).FindControl("chkSelect"), CheckBox).Checked = CType(Me.GridView1.HeaderRow.FindControl("chkHeader"), CheckBox).Checked
            End If
        Next
    End Sub