gridview实现服务器端和客户端全选的两种方法分享

首先，我们需要了解 GridView 是什么。GridView 是 ASP.NET WebForms 中常用的数据控件，用于将数据以表格的形式展示出来。在 GridView 中，一般会有多个 CheckBox 控件用于实现表格中数据的多选和全选功能。

接下来，我将介绍两种实现 GridView 的服务器端和客户端全选的方法。

方法一：使用事件处理程序实现全选

第一种方法是通过在服务器端编写事件处理程序来实现全选功能。以下是实现此方法的步骤：

1. 在 GridView 的 HeaderTemplate 中添加一个 CheckBox 控件，用于全选操作。

html
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" Text="全选" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkItem" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

1. 在 C# 代码中，添加 GridView 的 OnRowDataBound 事件处理程序。

c#
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
CheckBox chkAll = (CheckBox)e.Row.FindControl("chkAll");
chkAll.Attributes.Add("onclick", "chkAll_Click(this);");
}
else if (e.Row.RowType == DataControlRowType.DataRow)
{
CheckBox chkItem = (CheckBox)e.Row.FindControl("chkItem");
chkItem.Attributes.Add("onclick", "chkItem_Click(this);");
}
}

1. 在 JavaScript 中，编写 chkAll_Click 和 chkItem_Click 函数，用于处理选择状态。

javascript
function chkAll_Click(chk) {
var gv = chk.parentNode.parentNode.parentNode;
var inputs = gv.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox") {
inputs[i].checked = chk.checked;
}
}
}
function chkItem_Click(chk) {
var gv = chk.parentNode.parentNode.parentNode;
var chkAll = gv.getElementsByTagName("input")[0];
if (!chk.checked) {
chkAll.checked = false;
}
else {
var inputs = gv.getElementsByTagName("input");
for (var i = 1; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && !inputs[i].checked) {
return;
}
}
chkAll.checked = true;
}
}

这种方法会更加灵活，因为它可以通过 JavaScript 的方式在前端实现全选的功能，而且可以控制 CheckBox 在后台完成相应的动作。

方法二：使用 jQuery 实现全选

第二种方法是使用 jQuery 来实现全选功能。以下是实现此方法的步骤：

1. 在 GridView 的 HeaderTemplate 中添加一个 CheckBox 控件，用于全选操作。

html
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkAll" />
<label for="chkAll">全选</label>
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" class="chkItem" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

1. 在 Page_Load 事件中，引入 jQuery 库和一个自定义的 JavaScript 文件，用于实现全选功能。

c#
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-3.5.1.min.js",
DebugPath = "~/Scripts/jquery-3.5.1.js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"
});
ScriptManager.ScriptResourceMapping.AddDefinition("gridviewcheckall", new ScriptResourceDefinition
{
Path = "~/Scripts/gridviewcheckall.js",
DebugPath = "~/Scripts/gridviewcheckall.js"
});
}
}

1. 在 JavaScript 文件中，编写代码实现 checkbox 的选中和取消选择。

javascript
$(document).ready(function () {
$("#chkAll").click(function () {
$(".chkItem").prop("checked", $(this).prop("checked"));
});
$(".chkItem").click(function () {
if (!$(this).prop("checked")) {
$("#chkAll").prop("checked", false);
}
else {
var chkItems = $(".chkItem");
var checkedCount = 0;
for (var i = 0; i < chkItems.length; i++) {
if ($(chkItems[i]).prop("checked")) {
checkedCount++;
}
}
if (checkedCount == chkItems.length) {
$("#chkAll").prop("checked", true);
}
}
});
});

这种方法使用了 jQuery 库，在前端实现了全选功能。通过对 class 的方式来实现对 CheckBox 控件的选择控制，同样能很好的实现 GridView 的多选全选功能。

以上两种方法均是实现 GridView 的服务器端和客户端全选的主流方法，开发者可以选择更适合自己的方式来实现需求。