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>
