2011-12-16 227 views
0

我在gridview中有2列複選框,其中標題也包含複選框。 如果我選擇標題複選框,它將檢查其colomn中的所有對應複選框。 現在,我想要發生的是如果我選擇第1列複選框,第2列複選框應該取消選中,反之亦然。我的代碼如下幫助將不勝感激:從2列複選框中選擇一個複選框

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title></title> 
    <style type="text/css"> 
     #form1 
     { 
      height: 138px; 
      width: 509px; 
     } 
    </style> 
    <script type="text/javascript" > 
     function SelectAll(id) 
     { 
      // alert(id); 
      // GridView_ctl01_cbSelectAll 
      //get reference of GridView control 
      var cell; 
      var cellnext; 

      if(id =='GridView_ctl01_cbSelectAll') 

      { 
      var grid = document.getElementById("<%= GridView.ClientID %>"); 
      //variable to contain the cell of the grid 


      if (grid.rows.length > 0) 
      { 
       //loop starts from 1. rows[0] points to the header. 
       for (i=1; i<grid.rows.length; i++) 
       { 
        //get the reference of first column 
        cell = grid.rows[i].cells[1]; 

        //loop according to the number of childNodes in the cell 
        for (j=0; j<cell.childNodes.length; j++) 
        {   
         //if childNode type is CheckBox     
         if (cell.childNodes[j].type =="checkbox") 
         { 
         //assign the status of the Select All checkbox to the cell checkbox within the 

          cell.childNodes[j].checked = document.getElementById(id).checked; 


         } 
        } 
       } 
      } 


      } 

      else 
      { 

      //alert("yes"); 
      var grid = document.getElementById("<%= GridView.ClientID %>"); 
      //variable to contain the cell of the grid 


      if (grid.rows.length > 0) 
      { 
       //loop starts from 1. rows[0] points to the header. 
       for (i=1; i<grid.rows.length; i++) 
       { 
        //get the reference of first column 
        cellnext = grid.rows[i].cells[2]; 

        //loop according to the number of childNodes in the cell 
        for (j=0; j<cellnext.childNodes.length; j++) 
        {   
         //if childNode type is CheckBox     
         if (cellnext.childNodes[j].type =="checkbox") 
         { 
         //assign the status of the Select All checkbox to the cell checkbox within the grid 


          cellnext.childNodes[j].checked = document.getElementById(id).checked; 


         } 
        } 





       } 


      } 

      } 
      } 

    </script> 

</head> 
<body> 
<form runat ="server" id="form1"> 
    <asp:GridView ID="GridView" runat="server" BorderWidth="1px" AutoGenerateColumns="False" 
        Width="100%" Visible="True" AutoGenerateEditButton="False" GridLines="none" ShowHeader="true" 
        SelectedRowStyle-Wrap="false"> 

        <Columns> 

         <asp:TemplateField> 
          <ItemStyle Width="20%" /> 
          <HeaderStyle HorizontalAlign="Left" /> 
          <HeaderTemplate> 
           <strong>Name</strong> 
          </HeaderTemplate> 
          <ItemTemplate> 
            <asp:Label runat="server" class="ms-vb" ID="lblemployees" Text='<%# Bind("Name") %>'></asp:Label> 
          </ItemTemplate> 
         </asp:TemplateField> 

         <asp:TemplateField> 
          <ItemStyle Width="35%" /> 
          <HeaderStyle HorizontalAlign="Left" /> 
          <HeaderTemplate> 
           <strong> 
           <asp:CheckBox ID="cbSelectAll" runat="server" onclick="return SelectAll(this.id);" AutoPostBack="false" /> 
            Sleep (6 Hours) 
           </strong> 

          </HeaderTemplate> 
          <ItemTemplate> 
           <asp:CheckBox ID="cbSelect" runat="server" /> 
          </ItemTemplate> 
         </asp:TemplateField> 

         <asp:TemplateField> 
          <ItemStyle Width="50%" /> 
          <HeaderStyle HorizontalAlign="Left" /> 
          <HeaderTemplate> 
           <strong> 
           <asp:CheckBox ID="cbSelectAll1" runat="server" onclick="return SelectAll(this.id);" AutoPostBack="false" /> 
            Wake 
           </strong> 

          </HeaderTemplate> 
          <ItemTemplate> 
           <asp:CheckBox ID="cbSelect1" runat="server" /> 
          </ItemTemplate> 
         </asp:TemplateField> 

        </Columns> 
       </asp:GridView> 
</form> 
    <p> 
&nbsp;&nbsp;&nbsp; 
    </p> 
</body> 
</html> 

而且它的源代碼是:

Imports System.Data 
Imports System.Data.SqlClient 
Partial Public Class _Default 
    Inherits System.Web.UI.Page 

    Dim sqlconn As SqlConnection 
    Dim sqlCmd As SqlCommand 

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
     Dim strsql As String 

     Dim s As String = "whatever it may be " 
     sqlconn = New SqlConnection(s) 

     Dim sqlCmd As New SqlCommand() 
     Dim sqlAdp As SqlDataAdapter 

     sqlconn.Open() 
     strsql = "select name from tab_name" 
     sqlCmd.Connection = sqlconn 
     sqlCmd.CommandText = strsql 
     sqlAdp = New SqlDataAdapter() 
     sqlAdp.SelectCommand = sqlCmd 
     Dim DS As New DataSet() 
     sqlAdp.Fill(DS, "Return") 
     Dim dt As New DataTable() 
     dt = DS.Tables(0) 
     sqlCmd.Dispose() 
     sqlconn.Close() 
     GridView.DataSource = dt 
     GridView.DataBind() 

    End Sub 


    'Protected Sub GridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView.RowDataBound 
    ' If e.Row.RowType = DataControlRowType.Header Then 
    '  'Find the checkbox control in header and add an attribute 
    '  DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).Attributes.Add("onclick", "javascript:SelectAll('" + DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).ClientID & "')") 
    ' End If 
    'End Sub 
End Class 
+0

任何幫助嗎?將不勝感激 – 2011-12-16 13:27:52

回答

0

這可能是你的幫助。我用jQuery解決了它。你可以在這裏下載庫:http://docs.jquery.com/Downloading_jQuery

這裏是我的建議:

<script src="jquery-1.7.1.js" type="text/javascript"></script> 

    <asp:GridView ID="gvTest" runat="server" Width="100%"> 
     <Columns>    
     <asp:TemplateField> 
      <HeaderTemplate>      
       <asp:CheckBox ID="checkAll" runat="server" onclick="CheckAll(this,0);" /> 
      </HeaderTemplate>     
      <ItemTemplate>      
       <input type="checkbox" class="dummychkstyle" id="chkSelect" runat="server" />         
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField> 
      <HeaderTemplate>      
       <asp:CheckBox ID="checkAll2" runat="server" onclick="CheckAll(this,1);" /> 
      </HeaderTemplate>     
      <ItemTemplate>      
       <input type="checkbox" class="dummychkstyle2" id="chkSelect2" runat="server" />         
      </ItemTemplate> 
     </asp:TemplateField>  
     </Columns> 
    </asp:GridView> 
    <script language="javascript" type="text/javascript"> 
     function CheckAll(selectChk, index) { 
      if (index == 0) { 
       CheckCheckboxes(".dummychkstyle", ".dummychkstyle2", $(selectChk).attr('checked')); 
      } 
      else { 
       CheckCheckboxes(".dummychkstyle2", ".dummychkstyle", $(selectChk).attr('checked')); 
      } 
     } 
     function CheckCheckboxes(column1Class, column2Class, checked) { 
      if (checked) { 
       $(column1Class).attr('checked', true); 
       $(column2Class).attr('checked', false); 
      } 
      else { 
       $(column1Class).attr('checked', false); 
       $(column2Class).attr('checked', true); 
      } 
     } 
    </script> 
1

這裏是我想出了一個解決方案:

function SelectAll(id) 
{ 
    //get reference of GridView control 
    var grid = document.getElementById("<%= GridView.ClientID %>"); 
    if (grid.rows.length > 0) 
    { 
     var onIndex; 
     var offIndex; 

     // First, assume that the item is checked 
     if (id == 'GridView_ctl01_cbSelectAll') { 
      // Assuming col1 is checked, set the onindex to 1 and of to 2 
      onIndex = 1; 
      offIndex = 2; 
     } else { 
      onIndex = 2; 
      offIndex = 1; 
     } 

     // If the column is not checked, swap the indexes. 
     if (!document.getElementById(id).checked) { 
      var tempIndex; 
      tempIndex = onIndex; 
      onIndex = offIndex; 
      offIndex = tempindex; 
     } 

     // loop starts from 1. rows[0] points to the header. 
     for (var i = 1; i < grid.rows.length; i++) { 
      var row = grid.rows[i]; 
      SetCellCheckBox(row.cells[onIndex], true); 
      SetCellCheckBox(row.cells[offIndex], false); 
     } 
    } 

    function SetCellCheckBox(cell, value) { 

     // loop according to the number of childNodes in the cell 
     for (var j = 0; j < cell.childNodes.length; j++) { 
      //if childNode type is CheckBox     
      if (cell.childNodes[j].type == "checkbox") { 
       //assign the status of the Select All checkbox to the cell checkbox within the 
       cell.childNodes[j].checked = value; 
       // Bail once we have found the checkbox 
       return; 
      } 
     } 
    } 
} 
+0

well thanx答覆我已投票了,但我也希望它爲每個複選框也這是爲coloumn,如果我想沒有兩個chck框可以檢查同一時間在不同的列我怎麼可以這樣做 – 2011-12-19 06:36:13