专栏首页c#开发者DataGrid和CheckBox的混合使用

DataGrid和CheckBox的混合使用

我们知道DataGrid是非常强大的一个ASP.NET组件,我们可以用它表示非常丰富的信息.在论坛里经常可以看见一些网友问一些关于该控件的问题,我虽不是什么高手但是对DataGrid还是有一些了解,加上我比较喜欢学习所以我今天就将DataGrid和CheckBox的组合使用做一个简单的描述.我们可能在写程序的时候都遇到这种情况:需要选择一个列表的所有项或者取消所有项的选择来删除这些列以及如何给用户一个提示信息是否要删除(改功能我在相关文档里描述过了),我也遇到这个问题.我解决它有2个方案分别描述如下:

解决方案一:

1. 使用一个页面的CheckBox来完成这项艰巨的任务(夸张了),由于这个方法非常简单所以我也就不写代码只是做一个简单的描述就可以了.我们在我们页面上的DataGrid的上面或者下面放置一个CheckBox控件,最好用Table来控制位置这样看起来更加清楚.我们可以将这个CheckBox的AutoPostBack设置成true.这样我们可以让它提交服务器事件.很显然我们想要利用服务器事件来实现这个功能,后面就是遍历DataGrid的所有行来和CheckBox的Checked的选择相一致.

2. 依然是使用服务器的事件来完成我们的工作,这次有些不同我们将这个CheckBox放到DataGrid中对应CheckBox的列的页眉上(header).我们给这个模板列的题头上添加一个CheckBox控件利用它来完成和1中相同的工作,只是过程稍微有些不同.首先我们需要一个DataGrid来表现我们的程序,该DataGrid在Html页上的代码如下:

<asp:datagrid id="grdServer" runat="server">

<Columns>

<asp:TemplateColumn>

<HeaderTemplate>

<asp:CheckBox id="chkAllServer" runat="server" AutoPostBack="True"></asp:CheckBox>

</HeaderTemplate>

<ItemTemplate>

<asp:CheckBox id="chkDelServer" runat="server"></asp:CheckBox>

</ItemTemplate>

</asp:TemplateColumn>

<asp:BoundColumn DataField="au_id" HeaderText="编号"></asp:BoundColumn>

// 只显示主要的下面的不写了……在grdClient中有绑定的详细列

</asp:datagrid>

我们给HerderTemple添加了一个chkAllServer其中Server说明它是调用服务器端事件的.我们为了给这个控件添加事件必须在创建DataGridItem的时候给它添加事件代码如下:

private void grdServer_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {

if(e.Item.ItemType == ListItemType.Header){

CheckBox chk = (CheckBox)e.Item.FindControl("chkAllServer");

// 给页眉上的CheckBox添加出发事件

chk.CheckedChanged +=new EventHandler(chk_CheckedChanged);

}

}

事件处理程序如下所示:

// 得到指定DataGrid的题头的CheckBox对象

private CheckBox GetHeaderCheckBox(DataGrid grd){

CheckBox chk = null;

foreach (DataGridItem i in grd.Controls[0].Controls){

if(i.ItemType == ListItemType.Header){

chk = (CheckBox)i.FindControl("chkAllServer");

break;

}

}

return chk;

}

private void chk_CheckedChanged(object sender, System.EventArgs e) {

CheckBox chk = this.GetHeaderCheckBox(this.grdServer);

foreach (DataGridItem i in this.grdServer.Items){

CheckBox inChk = (CheckBox)i.FindControl("chkDelServer");

inChk.Checked = chk.Checked;

}

}

该事件处理程序将DataGrid里面的所有的CheckBox的Checked变的和题头的CheckBox的Checked的状态一样.

解决方案二:

这个方案对应上面的服务器事件主要是描述客户端的事件.同样也有两个小的稍有不同的办法.

1. 和方案一的1一样,但是他是支持客户端的选中脚本至于脚本的内容下面2中会详细介绍.

2. 和解决方案一一样我们将CheckBox依然放在Header里面,稍有不同的是我们这次使用的是客户端脚本.为了实现这个功能我们在页面上放一个DataGrid如下:

<asp:datagrid id="grdClient" runat="server">

<Columns>

<asp:TemplateColumn>

<HeaderTemplate>

<asp:CheckBox id="chkAll" runat="server"></asp:CheckBox>

</HeaderTemplate>

<ItemTemplate>

<asp:CheckBox id="chkDelete" runat="server"></asp:CheckBox>

</ItemTemplate>

</asp:TemplateColumn>

<asp:BoundColumn DataField="au_id" HeaderText="编号"></asp:BoundColumn>

<asp:BoundColumn DataField="name" HeaderText="姓名"></asp:BoundColumn>

<asp:BoundColumn DataField="phone" HeaderText="电话"></asp:BoundColumn>

<asp:BoundColumn DataField="address" HeaderText="地址"></asp:BoundColumn>

<asp:BoundColumn DataField="city" HeaderText="城市"></asp:BoundColumn>

<asp:BoundColumn DataField="state" HeaderText="状态"></asp:BoundColumn>

<asp:BoundColumn DataField="zip" HeaderText="邮编"></asp:BoundColumn>

</Columns>

</asp:datagrid>

为了实现客户端脚本的功能我们还要为页面添加Javascript脚本,脚本代码如下:

<script language="javascript">

function SelectAll (chkVal, idVal) {

var thisfrm = document.forms[0];

// 查找Forms里面所有的元素

for (i=0; i<thisfrm.length; i++) {

// 查找模板头中的CheckBox

if (idVal.indexOf ('chkAll') != -1) {

if(chkVal == true) {

thisfrm.elements[i].checked = true;

}

else {

thisfrm.elements[i].checked = false;

}

} // if

// 如果除题头以外的项没有全选上则取消题头的选择

else if (idVal.indexOf ('chkDelete') != -1) {

if(thisfrm.elements[i].checked == false) {

thisfrm.elements[1].checked = false;

}

}

} // for

}

// 删除判断

function confirmDelete (thisfrm) {

for (i=0; i<thisfrm.length; i++) {

if (thisfrm.elements[i].name.indexOf('chkDelete') !=-1) {

if(thisfrm.elements[i].checked) {

return confirm ('你是否想要删除选择的记录?')

}

}

}

}

</script>

为了可以让这些控件和这些脚本联系上我们还需要在服务器端写如下的代码:

private void grdClient_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) {

if(e.Item.ItemType == ListItemType.Header){

CheckBox chk = (CheckBox)e.Item.FindControl("chkAll");

chk.Attributes.Add("onclick","javascript:return SelectAll(this.checked,this.id)");

}

else if(e.Item.ItemType == ListItemType.Item){

CheckBox chk = (CheckBox)e.Item.FindControl("chkDelete");

chk.Attributes.Add("onclick","javascript:return SelectAll(this.checked,this.id)");

}

}

为了绑定这两个DataGrid我们写了如下的绑定方法:

private void BindData(){

string commandText = "SELECT au_id, au_lname+au_fname as name, phone, address, city, state, zip FROM authors";

DataView dv = SqlHelper.ExecuteDataset(ConfigurationSettings.AppSettings["ConnectString"],CommandType.Text,commandText).Tables[0].DefaultView;

this.grdClient.DataSource = dv;

this.grdClient.DataBind();

this.grdServer.DataSource = dv;

this.grdServer.DataBind();

}

上面的代码可以看出我使用了Microsoft.ApplicationBlocks.Data命名空间里的SqlHelper,这个dll你可以从微软的网站上下载得到它的源码.

最后就是在页面加载的时候把我们的删除确认事件加载到客户端以及绑定我们的数据了,代码如下:

private void Page_Load(object sender, System.EventArgs e) {

// 在此处放置用户代码以初始化页面

this.btnDelete.Attributes.Add("onclick", "return confirmDelete (this.form);");

if(!this.IsPostBack){

this.BindData();

}

}

至于如何删除数据我想大家可能都知道我在这里就不说了,如果需要这个工程的源代码请发邮件到Wu_jian830@hotmail.com所取,希望有更好办法的同志可以继续.学习交流请联系上面email对应的MSN!文章中的错误请大家批评指正,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5手机APP开发入(5)

    HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(...

    阿新
  • IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)

    目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作。这种方式最简单,也很高效。webservice+xml的方式似乎已经过时。 下面是我做的一个...

    阿新
  • asp.net回调javascript

    using System; using System.Collections; using System.IO; using System.Text; ...

    阿新
  • 机器学习之线性回归(1)

    在开始理解回归分析之前,先有个二手房房价的例子,假设这里的房价只和面积,居室情况两个因素有关,那么我们就有下列的数据形式 面积 居室 房价[万] 80 2 10...

    breezedancer
  • 案例 | 盟广信息签约法大大电子合同,赋能公寓行业转型

    近日,第三方电子合同平台法大大正式和华住集团孵化的独立业务IT公司盟广信息达成合作,在服务长短租公寓高效运营的同时,共同赋能传统地产业务信息化转型。

    法大大电子合同
  • 逻辑回归、决策树和支持向量机(I)

    用户1737318
  • 逻辑回归、决策树和支持向量机(I)

    分类问题是我们在各个行业的商业业务中遇到的主要问题之一。在本文中,我们将从众多技术中挑选出三种主要技术展开讨论,逻辑回归(Logistic Regression...

    CSDN技术头条
  • T7316 yyy的最大公约数(者)

    题目背景 全场基本暴力 题目描述 ? 输入输出格式 输入格式: 如图 输出格式: 如图 输入输出样例 输入样例#1: 如图 输出样例#1: 如图 说明...

    attack
  • 镁客网每周硬科技领域投融资汇总(2.22-2.28),小米本月再投3家芯片创企

    本周硬科技领域投融资事件一共67起,人工智能领域发生34起融资事件和1起收购事件,占比53%;半导体领域发生8起融资事件和2起收购事件,占比15%;区块链领域发...

    镁客网
  • Confluence 6 分享一个文件

    协同合作和编辑不仅仅是发生在页面中,很多时候你需要与你的项目小组针对文档,报告,图片,表格进行协同操作。不管是针对性的市场计划或者一个完整的项目计划,你可以在 ...

    HoneyMoose

扫码关注云+社区

领取腾讯云代金券