gridview 多个复选框列

Question

在 asp.net vs05 上工作。我有三种类型的值，例如：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 规则，因为我要编写的代码依赖于它的存在。

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

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