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();
}
}
