在ASP.NET的GridView控件中,经常需要实现全选和反选的功能。例如,在Gmail或Hotmail中,用户可以通过勾选或取消勾选一个复选框来选择或取消选择列表中的所有记录。本文将介绍如何在ASP.NET的GridView中实现类似的功能。
首先,定义了一个名为Employee的类,并为其添加了一些记录。然后,将这些记录绑定到GridView控件中。
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Designation { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
var employees = new List<Employee>()
{
new Employee() { Id = 1, Name = "Ms. Nancy Davolio", Address = "507 - 20th Ave. E. Apt. 2A", Designation = "Sales Representative" },
// ... 省略其他员工记录 ...
};
gvEmployees.DataSource = employees;
gvEmployees.DataBind();
}
接下来,定义GridView控件,并在其中添加了复选框。
<asp:GridView ID="gvEmployees" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkAll" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkEmployee" />
</ItemTemplate>
</asp:TemplateField>
// ... 省略其他列 ...
</Columns>
// ... 省略其他样式 ...
</asp:GridView>
有两个需求:
为了实现这些功能,可以使用JavaScript和jQuery。以下是完整的JavaScript代码:
<script type="text/javascript">
$(document).ready(function () {
$("input[id*='chkEmployee']:checkbox").click(CheckUncheckAllCheckBoxAsNeeded);
$("input[id*='chkAll']:checkbox").click(function () {
if ($(this).is(":checked")) {
$("input[id*='chkEmployee']:checkbox").attr("checked", true);
} else {
$("input[id*='chkEmployee']:checkbox").attr("checked", false);
}
});
});
function CheckUncheckAllCheckBoxAsNeeded() {
var totalCheckboxes = $("input[id*='chkEmployee']:checkbox").size();
var checkedCheckboxes = $("input[id*='chkEmployee']:checkbox:checked").size();
if (totalCheckboxes == checkedCheckboxes) {
$("input[id*='chkAll']:checkbox").attr("checked", true);
} else {
$("input[id*='chkAll']:checkbox").attr("checked", false);
}
}
</script>