帮酷LOGO
0 0 评论
文章标签:Select  复选框  控制  记录  数据  Datagrid  Records  Using  


介绍

问题可以如下所述:

  • header 中应该有一个复选框来检查全部,并取消选中所有。
  • 应该有带有单独记录的复选框以单独选择记录。
  • 如果所有记录都被单独选中,则检查 header 上的所有复选框。
  • 应该在 DataGrid 外部有一个外部按钮,我们应该能够检索选中的记录。

Sample screenshot

解决方案

我在 DataGrid 中检索到的记录来自我创建的table。 用于在 SQL Server 中创建 table的脚本如下所示:

CREATETABLE [dbo].[Anz_Contacts] (
 [Id] [int] IDENTITY (1, 1) NOTNULL, 
 [FirstName] [char] (10) NULL, 
 [LastName] [char] (10) NULL, 
 [Designation] [varchar] (50) NULL 
) ON [PRIMARY]GOALTERTABLE [dbo].[Anz_Contacts] WITHNOCHECKADD 
 CONSTRAINT [PK_Anz_Contacts] PRIMARYKEYCLUSTERED 
 (
 [Id]
 ) ON [PRIMARY] GO

Sample screenshot

Page_Load 事件中,DataGrid 绑定到 table。 绑定 DataGrid的代码如下所示:

注意:更改符合你的DBMS的连接字符串,cnnDBmyDataGrid 是 protected 成员变量。

privatevoid Page_Load(object sender, System.EventArgs e)
{
 cnnDB = new SqlConnection("server=HOME;user id=sa;password=;database=Contacts");
 if (!IsPostBack)
 bindGrid();
}privatevoid 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看起来如何?

<formid="Form1"name="Form1"method="post"runat="server"><ASP:DATAGRIDid="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"><HeaderStyleBackColor="NavajoWhite"></HeaderStyle><FooterStyleBackColor="NavajoWhite"></FooterStyle><Columns><asp:TemplateColumnHeaderText="contract"><HeaderTemplate><inputtype="checkbox"id="checkAll" onclick="CheckAll(this);"runat="server"name="checkAll"></HeaderTemplate><ItemTemplate><inputtype="checkbox"runat="server"id="EmpId" onclick="CheckChanged();"checked='false'name="EmpId"/></ItemTemplate></asp:TemplateColumn><asp:TemplateColumnHeaderText="Id"><ItemTemplate><asp:Labelid="Id"Text='<%# 
DataBinder.Eval(Container.DataItem, "Id") %>'runat="server"/></ItemTemplate></asp:TemplateColumn><asp:BoundColumnDataField="FirstName"HeaderText="FirstName"></asp:BoundColumn><asp:BoundColumnDataField="LastName"HeaderText="LastName"></asp:BoundColumn><asp:BoundColumnDataField="Designation"HeaderText="Designation"></asp:BoundColumn></Columns></ASP:DATAGRID></form>

注意 DataGrid 中的TemplateColumnTemplateColumn 表示 DataGrid 控件的列类型,允许你自定义列中控件的布局。 我使用模板列在 header 和项模板中呈现复选框。 我使用了 HtmlInputCheckBox 控件而不是 <asp:CheckBox> 控件。 这是因为检查和取消选中严格是客户端进程,这里不需要服务器端操作。 当单击 header的复选框时,它将调用客户端脚本函数 CheckAll(),记录项中的复选框将调用 CheckChanged() 函数。

我使用第二个 TemplateColumn 来包含 Label 控件来显示 table 中的ID列。 这里 Label 控件将帮助我们获取所选记录的ID。 其余的列使用 DataGridBoundColumn 绑定到 FirstNameLastNameDesignation

现在,我们来看看客户端JavaScript函数来操作检查和取消选中。

如果使用 VS.NET 和代码 behind 模型,最好使用页面的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的状态,换句话说,header CheckBox。 接下来,我们遍历表单元素搜索所有具有名称"id"的CheckBox 控件,以设置与 header 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的窗体中添加这里代码 inside:

<asp:buttonid="selBtn"onclick="View_Selected"runat="server"name="selBtn"text="Show Selection"></asp:button>

按钮的事件处理程序:

publicvoid 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"字段。 一旦我们得到了标识,我们将它写到 Response



文章标签:数据  控制  Using  Select  记录  Datagrid  Records  复选框  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语