gridview多个复选框列

Question

在asp.net vs05上工作。我有三种类型的值Like：IsDesign，IsPrinting，IsInstall 它们是位类型。为了在我的gridview上表示这个位值，我使用了三个复选框列，GridView控件带有三个标题复选框和每个单独记录的复选框。单击标题时，选中标题复选框后选中所有复选框，它会突出显示所有行并检查所有行中的复选框，如果未选中，则会恢复该行的原始颜色并取消选中复选框。

要完成此任务，请使用客户端脚本。

<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

如果您使用CSS规则进行样式设置而不是像现在这样的内联样式，这将变得更多。要执行此操作，请将行样式标记更改为仅指定CSS类，而不是特定样式，如下所示：

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

然后，你可以使用这样的样式表应用你最初在标记中内联的相同样式（所有CSS规则与原始内联样式完全相同）：

.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 }

一旦你建立了CSS，接下来要做的就是点击标题复选框。为此，您必须使用JavaScript框架，例如jQuery，Dojo，YUI，MooTools或Prototype。没有人这样做会花一整天时间写出来并正确解释，即便如此，它甚至可能无法在所有浏览器中运行。我将告诉你如何使用jQuery做我认为你正在寻找的东西，因为这是我最熟悉的，但是任何JavaScript框架都可以完成同样的事情。

在您的标题模板中，除了您已拥有的<input />标记上的ID之外，您不需要任何其他内容。您应该删除已有的onclick属性，因为您不需要它。确保你使用我在上面定义的CSS规则，因为我要编写的代码依赖于它在那里。

首先，订阅标题复选框的click事件。单击该复选框后，此代码将找到该复选框所在的列，然后遍历表中的每一行，并单击它在该列中找到的复选框。

$(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");
            });
        }

    });

});

可以在http://jsbin.com/alafo

找到这方面的工作演示