gridview plusieurs case à cocher colonne

Question

Travail sur asp.net vs05. J'ai trois type de valeur Comme: IsDesign, IsPrinting, IsInstall ils sont de type bit. Pour représenter ces valeurs de bits sur ma grille, j'utilise trois colonnes de case à cocher, contrôle GridView avec trois cases à cocher et case à cocher pour chaque enregistrement individuel. Lorsque vous cliquez sur l'en-tête, cochez toutes les cases lorsque la case d'en-tête est cochée. Elle met en surbrillance toutes les lignes et coche les cases de toutes les lignes et, lorsqu'elle n'est pas cochée, restaure la couleur d'origine de la ligne et décoche les cases. Pour terminer cette tâche, utilisez le script côté client.

<asp:GridView ID="gvSearch" runat="server" AutoGenerateColumns="False" DataKeyNames="JobID" Width="880px" CellPadding="5" ForeColor="#333333" GridLines="None" AllowPaging="True" HorizontalAlign="Center" CellSpacing="1" PageSize="5" ShowFooter="True" Height="278px" OnPageIndexChanging="gvSearch_PageIndexChanging" OnRowDataBound="gvSearch_RowDataBound"> 
    <Columns> 
     <asp:CheckBoxField HeaderText="IsDesign" /> 
     <asp:CheckBoxField HeaderText="IsPrinting" /> 
     <asp:TemplateField HeaderText="IsInstall"> 
     <EditItemTemplate> 
      <asp:CheckBox ID="ckbIsDelivered" runat="server" Checked='<%# Bind("IsDelivered") %>' Text="IsDelivered" /> 
     </EditItemTemplate> 
     <FooterTemplate> 
      <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" /> 
     </FooterTemplate> 
     <ItemTemplate> 
      <asp:CheckBox ID="ckbIsDelivered" runat="server" onclick = "Check_Click(this)" Checked='<%# Bind("IsDelivered") %>' /> 
     </ItemTemplate> 
     <HeaderTemplate> 
      &nbsp;<br /> 
      <table border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td style="width: 21px"> 
        <input id="chkAll" name="chkAll" onclick = "checkAll(this);" type="checkbox" /> 
        </td> 
        <td style="width: 70px"> 
        <asp:Label ID="Label14" runat="server" Text="IsDelivered" /> 
        </td> 
       </tr> 
      </table> 
     </HeaderTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="JobID " SortExpression="JobID"> 
     <EditItemTemplate> 
      <asp:Label ID="Label1" runat="server" Text='<%# Eval("JobID") %>' /> 
     </EditItemTemplate> 
     <ItemTemplate> 
      <asp:Label ID="lblJobID" runat="server" Text='<%# Bind("JobID") %>' /> 
     </ItemTemplate> 
     </asp:TemplateField> 
     <asp:BoundField DataField="JobNo" HeaderText="JobNo " SortExpression="JobNo" /> 
     <asp:BoundField DataField="ClientName" HeaderText="ClientName " SortExpression="ClientName" /> 
     <asp:BoundField DataField="MediaName" HeaderText="MediaName " SortExpression="MediaName" /> 
     <asp:BoundField DataField="BrandName" HeaderText="BrandName " SortExpression="BrandName" /> 
     <asp:BoundField DataField="JobTypeDesc" HeaderText="JobTypeDesc " SortExpression="JobTypeDesc" /> 
     <asp:BoundField DataField="JobDesc" HeaderText="JobDesc " SortExpression="JobDesc" /> 
     <asp:BoundField DataField="OutletNameEnglish" HeaderText="OutletNameEnglish " SortExpression="OutletNameEnglish" /> 
     <asp:BoundField DataField="OutletAddressEnglish" HeaderText="OutletAddressEnglish " SortExpression="OutletAddressEnglish" /> 
     <asp:BoundField DataField="Length" HeaderText="Length " SortExpression="Length" /> 
     <asp:BoundField DataField="Height" HeaderText="Height " SortExpression="Height" /> 
     <asp:BoundField DataField="Sft" HeaderText="Sft " SortExpression="Sft" /> 
     <asp:BoundField DataField="DeliveryTargetDate" HeaderText="DeliveryTargetDate " SortExpression="DeliveryTargetDate" DataFormatString="{0:dd MMM yyyy}" /> 
     <asp:BoundField DataField="JobPriorityID" HeaderText="JobPriorityID " SortExpression="JobPriorityID" /> 
     <asp:BoundField DataField="Remarks" HeaderText="Remarks " SortExpression="Remarks" /> 
     <asp:CheckBoxField DataField="Status" HeaderText="Status " SortExpression="Status" /> 
     <asp:CheckBoxField DataField="IsActive" HeaderText="IsActive " SortExpression="IsActive" /> 
    </Columns> 
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" Height="50px" /> 
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Height="20px" /> 
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> 
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> 
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center" BorderWidth="1px" Height="20px" /> 
    <EditRowStyle BackColor="#999999" Height="40px" Width="100px" /> 

Answer 1

Cela deviendra beaucoup plus facile si vous utilisez des règles CSS pour votre style au lieu de styles en ligne comme vous avez actuellement. Pour ce faire, changer vos balises de style de ligne pour spécifier uniquement les classes CSS, et non pas des styles spécifiques, comme ceci:

<asp:GridView ID="gvSearch" runat="server" CssClass="gridView"> 
    <%-- ... Your other markup here ... --%> 
    <AlternatingRowStyle CssClass="altRow" /> 
    <RowStyle CssClass="row" /> 
    <FooterStyle CssClass="footer" /> 
    <PagerStyle CssClass="pager" /> 
    <SelectedRowStyle CssClass="selectedRow" /> 
    <HeaderStyle CssClass="headerRow" /> 
    <EditRowStyle CssClass="editingRow" /> 
</asp:GridView> 

Ensuite, vous pouvez appliquer les mêmes styles que vous aviez à l'origine en ligne dans votre balisage en utilisant une feuille de style comme celui-ci (toutes les règles CSS sont exactement les mêmes que vos styles en ligne d'origine):

.gridView { width: 880px; padding: 5px; color: #333; text-align: center; 
      height: 278px; border-collapse:separate;border-spacing: 1px;} 
.altRow { background: #fff; color: #284775 } 
.row { background: #f7f6f3; color: #333; height: 50px } 
.footer { background: #5d7b9d; font-weight: bold; color: #fff; height: 20px } 
.pager { background: #284775; color: #fff; text-align: center; } 
.selectedRow { background: #e2ded6; font-weight: bold; color: #333 } 
.headerRow { background: #5d7b9d; font-weight: bold; color: #333; 
      text-align: center; border: 1px solid #000; height: 20px } 
.editingRow { background: #999; height: 40px; width: 100px } 

Une fois que vous avez votre CSS établi, la prochaine chose à faire est de gérer en cliquant sur les cases à cocher en-tête. Pour ce faire, vous devez utiliser un cadre JavaScript comme jQuery, Dojo, YUI, MooTools ou Prototype. Le faire sans un serait me prendre toute la journée pour écrire et expliquer correctement, et même alors, il ne fonctionne même pas dans tous les navigateurs. Je vais vous montrer comment faire ce que je pense que vous cherchez en utilisant jQuery, puisque c'est ce que je suis le plus à l'aise, mais n'importe quel framework JavaScript peut accomplir la même chose.

Dans votre modèle d'en-tête, vous n'avez besoin de rien d'autre qu'un ID sur votre balise <input />, que vous possédez déjà. Vous devez supprimer l'attribut onclick que vous avez déjà, car vous n'en aurez pas besoin. Assurez-vous que vous utilisez les règles CSS que j'ai définies ci-dessus, car le code que je vais écrire repose sur son existence.

Tout d'abord, abonnez-vous à l'événement click de l'en-tête. Lorsque la case à cocher est activée, ce code trouve la colonne dans laquelle la case à cocher existe, puis passe à travers chaque ligne de la table et clique sur la case à cocher trouvée dans cette colonne.

$(document).ready(function() { 
    $("#chkAll").click(function(){ 

     // First find the column index of the clicked checkbox 
     // If you know your column order won't change, this 
     // can be done with less code by just hard-coding 
     // the "colIndex" variable to the zero-based column number 
     var $this = $(this); 
     var clickedColumn = $this.closest(".headerRow > th"); 
     var headerRow = $this.closest(".headerRow"); 
     var colIndex = headerRow.children().index(clickedColumn); 

     // Next, traverse through the table, checking or 
     // unchecking each checkbox in the specified column index 
     var table = $this.closest("table.gridView"); 

     if (this.checked) { 
      table.find("tr.altRow, tr.row").each(function() { 
       var $this = $(this); 
       // Finding the checkbox in the correct column 
       // involves finding the correct column and then 
       // getting the checkbox inside it. This is easy 
       // with jQuery 
       var checkbox = $this.children() 
            .eq(colIndex) 
            .children("input:checkbox"); 
       checkbox.attr("checked", true); 
       $this.addClass("selectedRow"); 
      }); 
     } else { 
      table.find("tr.altRow, tr.row").each(function() { 
       var $this = $(this); 
       // Finding the checkbox in the correct column 
       // involves finding the correct column and then 
       // getting the checkbox inside it. This is easy 
       // with jQuery 
       var checkbox = $this.children() 
            .eq(colIndex) 
            .children("input:checkbox"); 
       checkbox.attr("checked", false); 
       $this.removeClass("selectedRow"); 
      }); 
     } 

    }); 

}); 

Une démonstration de travail de ce qui peut être trouvé à l'adresse: http://jsbin.com/alafo