在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>
<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" />
答案 0 :(得分：0)
如果您使用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");
});
}
});
});