GridView中实现反选和全选功能

本文介绍如何在 ASP.NET 的 GridView 控件中实现全选、反选功能及基于 JavaScript 的用户交互验证。同时展示了如何通过 C# 后端代码进行数据绑定与删除操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiSelectGridView.aspx.cs" Inherits="MultiSelectGridView" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5.     <title>在GridView中实现全选反选的例子</title>
  6.     <script language="javascript" type="text/javascript">
  7.     //反选
  8.     function ReverseSelect()
  9.     {
  10.         var checkbox = document.all.CheckboxGroup;
  11.         if(checkbox==null)
  12.         {
  13.             return false;//zhoufoxcn modify 2007-12-25
  14.         }
  15.         
  16.         if(checkbox.length+""!="undefined")
  17.         {
  18.             for( var i=0;i<checkbox.length;i++ )
  19.             {
  20.                 checkbox[i].checked = !checkbox[i].checked;
  21.             }
  22.         }
  23.         else
  24.         {
  25.             // 修正当列表长度为1时,不能反选的BUG
  26.             checkbox.checked = !checkbox.checked;
  27.         }
  28.         return false;//zhoufoxcn modify 2007-12-25
  29.         
  30.     }
  31.     //全选
  32.     function SelectAll()
  33.     {
  34.         var checkbox = document.all.CheckboxGroup;
  35.         if(checkbox==null)
  36.         {
  37.             return false;//zhoufoxcn modify 2007-12-25
  38.         }
  39.         
  40.         if( checkbox.length+""!="undefined")
  41.         {
  42.             for( var i=0;i<checkbox.length;i++ )
  43.             {
  44.                 checkbox[i].checked = true;
  45.             }
  46.         }
  47.         else
  48.         {
  49.             checkbox.checked = true;
  50.         }
  51.         return false;//zhoufoxcn modify 2007-12-25
  52.     }
  53.     //检查是否至少选择了一项
  54.     function CheckHasSelectedItem()
  55.     {
  56.         var checkbox = document.all.CheckboxGroup;
  57.         if(checkbox==null)
  58.         {
  59.             return false;//zhoufoxcn modify 2007-12-25
  60.         }
  61.         
  62.         if( checkbox.length+""!="undefined")
  63.         {
  64.             for( var i=0;i<checkbox.length;i++ )
  65.             {
  66.                 if(checkbox[i].checked)
  67.                 {
  68.                     return true;
  69.                 }
  70.             }
  71.         }
  72.         else
  73.         {
  74.             return false;
  75.         }
  76.     }
  77.     //删除用户前的确认
  78.     function ConfirmDelete()
  79.     {
  80.         if(CheckHasSelectedItem())//如果至少选择了一项
  81.         {
  82.             return confirm("确认删除选中的用户?");
  83.         }
  84.         else
  85.         {
  86.             alert("请至少选择一项!");
  87.             return false;
  88.         }
  89.     }
  90.     </script>
  91. </head>
  92. <body>
  93.     <form id="form1" runat="server">
  94.     <div>
  95.         <asp:GridView ID="gvUserList" runat="server" AutoGenerateColumns="False" Width="800px" AllowPaging="True" OnPageIndexChanging="gvUserList_PageIndexChanging" PageSize="5">
  96.             <Columns>
  97.                 <asp:TemplateField>
  98.                 <ItemTemplate>
  99.                 <input name='CheckboxGroup' type='checkbox' value='<%#Eval("UserId") %>'>
  100.                 </ItemTemplate>
  101.                 </asp:TemplateField>
  102.                 <asp:BoundField DataField="UserId" HeaderText="编号" />
  103.                 <asp:HyperLinkField DataNavigateUrlFields="UserId" DataNavigateUrlFormatString="ShowUser.aspx?UserId={0}"
  104.                     DataTextField="RealName" HeaderText="查看" />
  105.                 <asp:BoundField DataField="UserName" HeaderText="用户名" />
  106.                 <asp:BoundField DataField="RealName" HeaderText="真实姓名" />
  107.                 <asp:BoundField DataField="Age" HeaderText="年龄" />
  108.                 <asp:CheckBoxField DataField="Sex" HeaderText="男" />
  109.                 <asp:BoundField DataField="Mobile" HeaderText="手机" />
  110.                 <asp:TemplateField HeaderText="电子邮件">
  111.                     <AlternatingItemTemplate>
  112.                         <a href='emailto:<%#Eval("Email") %>'>发电子给<%#Eval("RealName") %></a>
  113.                     </AlternatingItemTemplate>
  114.                     <ItemTemplate>
  115.                         <%#Eval("Email") %>
  116.                     </ItemTemplate>
  117.                 </asp:TemplateField>
  118.             </Columns>
  119.             <EmptyDataTemplate>
  120.                 温馨提示:当前没有任何记录哦。
  121.             </EmptyDataTemplate>
  122.             
  123.         </asp:GridView>
  124.     <table border="0" width="800" cellpadding="0" cellspacing="0">
  125.     <tr><td><a style="text-decoration:underline" href="#" onclick="SelectAll();">全选</a></td>
  126.     <td><a style="text-decoration:underline" href="#" onclick="ReverseSelect();">反选</a></td>
  127.     <td>
  128.         <asp:Button ID="btnDelete" runat="server" OnClientClick="javascript:return ConfirmDelete();" OnClick="btnDelete_Click" Text="删除" /></td>
  129.     </tr>
  130.     </table>
  131.     </div>
  132.     </form>
  133. </body>
  134. </html>

后台代码如下:

 
  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11. using System.Data.SqlClient;
  12. public partial class MultiSelectGridView : System.Web.UI.Page
  13. {
  14.     protected void Page_Load(object sender, EventArgs e)
  15.     {
  16.         if (!Page.IsPostBack)
  17.         {
  18.             BindGridView(0);
  19.         }
  20.     }
  21.     //指定绑定页面的数据
  22.     private void BindGridView(int pageIndex)
  23.     {
  24.         //实例化Connection对象
  25.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
  26.         //实例化Command对象
  27.         SqlCommand command = new SqlCommand("select * from UserInfo", connection);
  28.         SqlDataAdapter adapter = new SqlDataAdapter(command);
  29.         DataTable data = new DataTable();
  30.         adapter.Fill(data);
  31.         gvUserList.DataSource = data;
  32.         gvUserList.PageIndex = pageIndex;//设置当前显示第几页
  33.         gvUserList.DataBind();
  34.     }
  35.     //翻页事件
  36.     protected void gvUserList_PageIndexChanging(object sender, GridViewPageEventArgs e)
  37.     {
  38.         //指定新页面,重新绑定数据
  39.         BindGridView(e.NewPageIndex);
  40.     }
  41.     //删除选中的用户代码
  42.     protected void btnDelete_Click(object sender, EventArgs e)
  43.     {
  44.         string sql = "delete from UserInfo where UserId in (" + Request["CheckboxGroup"] + ")";
  45.         SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa");
  46.         SqlCommand command = new SqlCommand(sql, connection);
  47.         connection.Open();
  48.         int count = command.ExecuteNonQuery();
  49.         connection.Close();
  50.         //删除成功后给出提示,并且跳转到当前页面
  51.         if (count > 0)
  52.         {
  53.             Page.ClientScript.RegisterClientScriptBlock(
  54.                 this.GetType(), "success",
  55.                 "<script language='javascript'>alert('删除成功!');"
  56.             + "window.location='MultiSelectGridView.aspx';</script>"
  57.                 );
  58.         }
  59.         else//删除不成功给出不成功的提示
  60.         {
  61.             Page.ClientScript.RegisterClientScriptBlock(
  62.                 this.GetType(), "fail",
  63.                 "<script language='javascript'>alert('删除成功!');</script>"
  64.                 );
  65.         }
  66.     }
  67. }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值