GridView中实现反选和全选功能

最新推荐文章于 2021-05-27 11:06:50 发布

转载最新推荐文章于 2021-05-27 11:06:50 发布 · 928 阅读

文章标签：

#asp #javascript #server #command #null #email

Asp.net 专栏收录该内容

36 篇文章

订阅专栏

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

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

<%@ 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>

后台代码如下：

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.Data.SqlClient; 

public partial class MultiSelectGridView : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        if (!Page.IsPostBack) 
        { 
            BindGridView(0); 
        } 
    } 
    //指定绑定页面的数据 
    private void BindGridView(int pageIndex) 
    { 
        //实例化Connection对象 
        SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa"); 
        //实例化Command对象 
        SqlCommand command = new SqlCommand("select * from UserInfo", connection); 
        SqlDataAdapter adapter = new SqlDataAdapter(command); 
        DataTable data = new DataTable(); 
        adapter.Fill(data); 

        gvUserList.DataSource = data; 
        gvUserList.PageIndex = pageIndex;//设置当前显示第几页 
        gvUserList.DataBind(); 
    } 
    //翻页事件 
    protected void gvUserList_PageIndexChanging(object sender, GridViewPageEventArgs e) 
    { 
        //指定新页面，重新绑定数据 
        BindGridView(e.NewPageIndex); 
    } 
    //删除选中的用户代码 
    protected void btnDelete_Click(object sender, EventArgs e) 
    { 
        string sql = "delete from UserInfo where UserId in (" + Request["CheckboxGroup"] + ")"; 
        SqlConnection connection = new SqlConnection("Data Source=(local);Initial Catalog=AspNetStudy;Persist Security Info=True;User ID=sa;Password=sa"); 
        SqlCommand command = new SqlCommand(sql, connection); 
        connection.Open(); 
        int count = command.ExecuteNonQuery(); 
        connection.Close(); 
        //删除成功后给出提示，并且跳转到当前页面 
        if (count > 0) 
        { 
            Page.ClientScript.RegisterClientScriptBlock( 
                this.GetType(), "success", 
                "<script language='javascript'>alert('删除成功！');" 
            + "window.location='MultiSelectGridView.aspx';</script>" 
                ); 
        } 
        else//删除不成功给出不成功的提示 
        { 
            Page.ClientScript.RegisterClientScriptBlock( 
                this.GetType(), "fail", 
                "<script language='javascript'>alert('删除成功！');</script>" 
                ); 
        } 
    } 
}