在 DataGrid 控件中使用 CheckBox 选择记录
本文介绍了如何在 Datagrid 控件中使用 CheckBox 来选择记录，类似于邮箱中的功能。
引言
问题可以表述如下：
- 应该在标题行中有一个复选框，用于“全选”和“取消全选”。
- 应在每个记录旁边都有复选框，用于单独选择记录。
- 如果所有记录都被单独选中，则标题行中的“全选”复选框也应被选中。
- 应该有一个 DataGrid 控件外部的按钮，用于检索选中的记录。
解决方案
在 DataGrid 中检索到的记录来自我创建的一个表。在 SQL Server 中创建表的脚本如下：
CREATE TABLE [dbo].[Anz_Contacts] (
[Id] [int] IDENTITY (1, 1) NOT NULL ,
[FirstName] [char] (10) NULL ,
[LastName] [char] (10) NULL ,
[Designation] [varchar] (50) NULL
) ON [PRIMARY]
GO
ALTER TABLE [dbo].[Anz_Contacts] WITH NOCHECK ADD
CONSTRAINT [PK_Anz_Contacts] PRIMARY KEY CLUSTERED
(
[Id]
) ON [PRIMARY]
GO
在 Page_Load 事件中，将 DataGrid 绑定到该表。绑定 DataGrid 的代码如下所示：
注意：请根据您的 DBMS 修改连接字符串，cnnDB 和 myDataGrid 是受保护的成员变量。
private void Page_Load(object sender, System.EventArgs e)
{
cnnDB = new SqlConnection("server=HOME;user id=sa;password=;database=Contacts");
if (!IsPostBack)
bindGrid();
}
private void bindGrid()
{
SqlDataAdapter da = new SqlDataAdapter("select * from Anz_Contacts",cnnDB);
DataSet ds = new DataSet();
da.Fill(ds, "Employees");
myDataGrid.DataSource=ds.Tables["Employees"].DefaultView;
myDataGrid.DataBind();
}
现在我们已经了解了如何将数据绑定到网格，接下来将看看 DataGrid 的 HTML 是什么样的：
<form id="Form1" name="Form1" method="post" runat="server">
<ASP:DATAGRID id="myDataGrid"
runat="server"
AutoGenerateColumns="false"
HeaderStyle-BackColor="#aaaadd"
Font-Size="8pt"
Font-Name="Verdana"
CellSpacing="0"
CellPadding="3"
ShowFooter="true"
BorderColor="Black"
BackColor="AntiqueWhite"
Width="600">
<HeaderStyle BackColor="NavajoWhite"></HeaderStyle>
<FooterStyle BackColor="NavajoWhite"></FooterStyle>
<Columns>
<asp:TemplateColumn HeaderText="contract">
<HeaderTemplate>
<input type="checkbox" id="checkAll"
onclick="CheckAll(this);" runat="server" name="checkAll">
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" runat="server" id="EmpId"
onclick="CheckChanged();" checked='false' name="EmpId" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Id">
<ItemTemplate>
<asp:Label id="Id" Text='<%#
DataBinder.Eval(Container.DataItem, "Id") %>' runat="server" />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="FirstName"
HeaderText="FirstName"></asp:BoundColumn>
<asp:BoundColumn DataField="LastName"
HeaderText="LastName"></asp:BoundColumn>
<asp:BoundColumn DataField="Designation"
HeaderText="Designation"></asp:BoundColumn>
</Columns>
</ASP:DATAGRID>
</form >
注意 DataGrid 中的 TemplateColumn。TemplateColumn 代表 DataGrid 控件的一种列类型，允许您自定义列中控件的布局。我使用模板列在标题和项模板中渲染复选框。我使用的是 HtmlInputCheckBox 控件，而不是 <asp:CheckBox> 控件。这是因为选中和取消选中完全是客户端过程，这里不需要服务器端操作。标题中的复选框在被单击时将调用客户端脚本函数 CheckAll()，而记录项中的复选框将调用 CheckChanged() 函数。
我使用第二个 TemplateColumn 来包含一个 Label 控件，以显示表中的 ID 列。这个 Label 控件将帮助我们在以后获取选中记录的 ID。其余列使用 DataGrid 的 BoundColumn 绑定了 FirstName、LastName 和 Designation。
现在我们来看看用于操作选中和取消选中的客户端 JavaScript 函数。
如果我们使用 VS.NET 和代码隐藏模型，最好使用页面的 RegisterClientScriptBlock 方法来在页面中输出客户端脚本块。客户端脚本注册在页面加载时完成。因此，我们可以在页面的 Page_load 事件中编写相应的代码。
JavaScript 函数 CheckAll() 如下所示。为了提高可读性，我使用了字符串连接来构建脚本字符串。您可以使用 StringBuilder 类来实现更高效的连接。
string strScript;
strScript= " <script language=JavaScript> ";
strScript+=" function CheckAll( checkAllBox ) ";
strScript+=" { ";
strScript+=" var frm = document.Form1; ";
strScript+=" var ChkState=checkAllBox.checked; ";
strScript+=" for(i=0;i< frm.length;i++) ";
strScript+=" { ";
strScript+=" e=frm.elements[i]; ";
strScript+=" if(e.type=='checkbox' && e.name.indexOf('Id') != -1)";
strScript+=" e.checked= ChkState ; ";
strScript+=" } ";
strScript+=" } ";
strScript+=" </script> ";
if(!this.IsClientScriptBlockRegistered("clientScriptCheckAll"))
this.RegisterClientScriptBlock("clientScriptCheckAll", strScript);
在上面的脚本中，我们首先检查了触发事件的 CheckBox 的状态，即标题 CheckBox。接下来，我们遍历表单元素，查找所有名称中包含“Id”的 CheckBox 控件，并将这些 CheckBox 的值设置为与标题 CheckBox 匹配。
当每个记录项中的复选框被选中或取消选中时调用的 JavaScript 函数如下。在这里，我们检查所有记录是否都被选中，以确定标题中 checkAll 复选框的选中状态。
strScript="";
strScript= "<script language=JavaScript> ";
strScript+="function CheckChanged() ";
strScript+="{ ";
strScript+=" var frm = document.Form1; ";
strScript+=" var boolAllChecked; ";
strScript+=" boolAllChecked=true; ";
strScript+=" for(i=0;i< frm.length;i++) ";
strScript+=" { ";
strScript+=" e=frm.elements[i]; ";
strScript+=" if ( e.type=='checkbox' && e.name.indexOf('Id') != -1 )";
strScript+=" if(e.checked== false) ";
strScript+=" { ";
strScript+=" boolAllChecked=false; ";
strScript+=" break; ";
strScript+=" } ";
strScript+=" } ";
strScript+=" for(i=0;i< frm.length;i++) ";
strScript+=" { ";
strScript+=" e=frm.elements[i]; ";
strScript+=" if ( e.type=='checkbox' && e.name.indexOf('checkAll') != -1 )";
strScript+=" { ";
strScript+=" if( boolAllChecked==false) ";
strScript+=" e.checked= false ; ";
strScript+=" else ";
strScript+=" e.checked= true; ";
strScript+=" break; ";
strScript+=" } ";
strScript+=" } ";
strScript+=" } ";
strScript+=" </script> ";
if(!this.IsClientScriptBlockRegistered("clientScriptCheckChanged"))
this.RegisterClientScriptBlock("clientScriptCheckChanged", strScript);
现在，剩下的就是使用 DataGrid 外部的一个按钮来检索选中的记录。将此代码添加到包含 DataGrid 的表单中。
<asp:button id="selBtn" onclick="View_Selected" runat="server"
name="selBtn" text="Show Selection"></asp:button>
按钮的事件处理程序
public void View_Selected(object sender, EventArgs e)
{
foreach( DataGridItem di in myDataGrid.Items )
{
HtmlInputCheckBox chkBx = (HtmlInputCheckBox)di.FindControl("EmpId") ;
if( chkBx !=null && chkBx.Checked )
{
Label lbl = (Label)di.FindControl("Id");
Response.Write( lbl.Text +"<br>" );
}
}
}
我们遍历 DataGrid 中包含的每个 DataGridItem，查找 HtmlInputCheckBox 控件，然后检查其值。如果被选中，我们将查找 DataGridItem 中的 Label 控件以获取“ID”字段。一旦获得 ID，我们将它写入 Response。