asp.net夜话之八：数据绑定控件（二）

asp.net夜话之八：数据绑定控件（二）2011-03-04 csdn博客周公GridView中实现反选和全选功能

在显示数据的时候经常有一些批量操作的功能，比如数据的批量删除等，我们可以利用javascript脚本来辅助实现这一功能，不过如果用asp.net中的CheckBox控件来实现这个功能的话，比较麻烦，因为在GridView这样的控件将asp.net中的Web服务器控件转换成普通HTML控件的时候不能直接按照控件的ID来分配，存在着在一个GridView中有多个CheckBox控件，为了防止命名冲突，asp.net 为页上的各个服务器控件自动生成一个唯一的 ClientID 值。ClientID 值是通过连接控件的 ID 值和它的父控件的 UniqueID 值生成的。如果未指定控件的 ID 值，则使用自动生成的值。如果我们在GridView中添加一个CheckBox控件，我们在生成的HTML控件中会发现它生成的HTML代码类似于下面的格式：

<input id="gvUserList_ctl02_ctl01" type="checkbox" name="gvUserList$ctl02$ctl01" checked="checked" disabled="disabled" />

所以我们在用javascript操作GridView这样的控件中的asp.net Web服务器控件一定要注意这个情况，可以通过asp.net Web服务器控件的ClientID属性来操作。

这时候我们可以使用普通HTML控件来达到我们想要的功能，asp.net对于普通HTML控件是不会更改它的id和name属性的。

实现了单选和复选功能之后，我们如何获取选中的值呢？因为是普通HTML控件，自然不能像asp.net Web服务器控件那样利用某个属性来判断，不过我们可以利用一个asp.net Button服务器控件来提交表单，然后通过Request[“控件的name”]来获取选中的值（没有印象的朋友赶紧看第三页的介绍），得到值是形如“15,16,17”这样的字符串，这时我们可以利用SQL语句来进行批量操作，我们的SQL语句可以这么写：

String sql=”delete from Users where UserId in（“+Request["CheckboxGroup"]+”）”;

这样就不必进行分割字符串的操作，只连接数据库操作就删除了选中的数据，大大提高了效率。

因为整个程序的代码比较复杂，所以采用了页面和代码分离的模式，前台代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiSelectGridView.aspx.cs" Inherits="MultiSelectGridView" %>

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>在GridView中实现全选反选的例子</title>
<script language="javascript" type="text/javascript">
//反选
function ReverseSelect（）
{
var checkbox = document.all.CheckboxGroup;
if（checkbox==null）
{
return false;//zhoufoxcn modify 2007-12-25
}

if（checkbox.length+""！="undefined"）
{
for（ var i=0;i<checkbox.length;i++ ）
{
checkbox[i].checked = ！checkbox[i].checked;
}
}
else
{
// 修正当列表长度为1时，不能反选的BUG
checkbox.checked = ！checkbox.checked;
}
return false;//zhoufoxcn modify 2007-12-25

}
//全选
function SelectAll（）
{
var checkbox = document.all.CheckboxGroup;
if（checkbox==null）
{
return false;//zhoufoxcn modify 2007-12-25
}

if（ checkbox.length+""！="undefined"）
{
for（ var i=0;i<checkbox.length;i++ ）
{
checkbox[i].checked = true;
}
}
else
{
checkbox.checked = true;
}
return false;//zhoufoxcn modify 2007-12-25
}
//检查是否至少选择了一项
function CheckHasSelectedItem（）
{
var checkbox = document.all.CheckboxGroup;
if（checkbox==null）
{
return false;//zhoufoxcn modify 2007-12-25
}

if（ checkbox.length+""！="undefined"）
{
for（ var i=0;i<checkbox.length;i++ ）
{
if（checkbox[i].checked）
{
return true;
}
}
}
else
{
return false;
}
}
//删除用户前的确认
function ConfirmDelete（）
{
if（CheckHasSelectedItem（））//如果至少选择了一项
{
return confirm（"确认删除选中的用户？"）;
}
else
{
alert（"请至少选择一项！"）;
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvUserList" runat="server" AutoGenerateColumns="False" Width="800px" AllowPaging="True" OnPageIndexChanging="gvUserList_PageIndexChanging" PageSize="5">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input name="CheckboxGroup" type="checkbox" value="<%#Eval（"UserId"） %>">
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserId" HeaderText="编号" />
<asp:HyperLinkField DataNavigateUrlFields="UserId" DataNavigateUrlFormatString="ShowUser.aspx？UserId={0}"
DataTextField="RealName" HeaderText="查看" />
<asp:BoundField DataField="UserName" HeaderText="用户名" />
<asp:BoundField DataField="RealName" HeaderText="真实姓名" />
<asp:BoundField DataField="Age" HeaderText="年龄" />
<asp:CheckBoxField DataField="Sex" HeaderText="男" />
<asp:BoundField DataField="Mobile" HeaderText="手机" />
<asp:TemplateField HeaderText="电子邮件">
<AlternatingItemTemplate>
<a href="emailto:<%#Eval（"Email"） %>">发电子给<%#Eval（"RealName"） %></a>
</AlternatingItemTemplate>
<ItemTemplate>
<%#Eval（"Email"） %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
温馨提示：当前没有任何记录哦。
</EmptyDataTemplate>

</asp:GridView>
<table border="0" width="800" cellpadding="0" cellspacing="0">
<tr><td><a style="text-decoration:underline" href="#" onclick="SelectAll（）;">全选</a></td>
<td><a style="text-decoration:underline" href="#" onclick="ReverseSelect（）;">反选</a></td>
<td>
<asp:Button ID="btnDelete" runat="server" OnClientClick="javascript:return ConfirmDelete（）;" OnClick="btnDelete_Click" Text="删除" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>