`

GridView多选框全选删除和光棒效果

ASPUIWebJavaScriptMobile 
阅读更多

界面参考:

 

aspx页面:

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

<!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>无标题页</title>

    <script type="text/javascript">
    
    function GetAllCheckBox(CheckAll){
        //var items=document.getElementsByTagName("input");
        var items=document.getElementsByName("CheckBoxGroup");
        for(var i=0;i<items.length;i++){
            if(items[i].type=="checkbox"){
            //全选的CheckBox.checked为true则为为全选,false则反选
                items[i].checked=CheckAll.checked;
            }
        }
    }
    
   //检查是否至少选择了一项 
function CheckHasSelectedItem() 
{
//得到所有name为CheckBoxGroup 
var checkbox = document.all.CheckBoxGroup; 

if(checkbox==null) 
{ 
return false;
} 

if(checkbox.length+""!="undefined")
{ 
for( var i=0;i<checkbox.length;i++ ) 
{ 
if(checkbox[i].checked) 
{ 
return true; 
} 
} 
} 
 /*当数据库中只有一条记录时,
 * document.all.CheckBoxGroup取出的是Object对象而不是数组
  所以我们在这还要判断得到Object对象时是否被选中
  (可以在数据库中只去一条数据测试(top 1),查看是否有这个小Bug)
  */
 else if(checkbox.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="GridView1" runat="server" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging"
            EmptyDataText="无数据" onrowdatabound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        全选<input type="checkbox" onclick="javascript:GetAllCheckBox(this);" name="selAll" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input type="checkbox" name="CheckBoxGroup" value='<%#Eval("userid") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="UserName" HeaderText="用户名" />
                <asp:HyperLinkField DataNavigateUrlFields="userId" DataNavigateUrlFormatString="ShowUser.aspx?UserId={0}"
                    DataTextField="RealName" HeaderText="查看" />
                <asp:BoundField DataField="Age" HeaderText="年龄" />
                <asp:CheckBoxField DataField="Sex" HeaderText="男" />
                <asp:BoundField DataField="Phone" HeaderText="电话" />
                <asp:ButtonField DataTextField="Mobile" HeaderText="手机" Text="按钮" />
                <asp:TemplateField>
                    <HeaderTemplate>
                        邮件啦</HeaderTemplate>
                    <AlternatingItemTemplate>
                        <a href='emailto:<%#Eval("Email") %>'>
                            <%#Eval("Email") %></a>
                    </AlternatingItemTemplate>
                    <ItemTemplate>
                        <%#Eval("Email") %>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:Button ID="Button1" runat="server" Text="删除" 
            OnClientClick="return ConfirmDelete() " onclick="Button1_Click" />
    </div>
    </form>
</body>
</html>

 

    aspx.cs

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

public partial class Default7 : System.Web.UI.Page
{
    SqlConnection conn;
    protected void Page_Load(object sender, EventArgs e)
    {
        conn = new SqlConnection(ConfigurationManager.ConnectionStrings["sql2005"].ConnectionString);
        if (!IsPostBack)
        {
            GVBinds(0);
        }
    }
    /// <summary>
    /// 绑定数据
    /// </summary>
    /// <param name="pageIndex"></param>
    private void GVBinds(int pageIndex)
    {
        DataTable dt = new DataTable();
        conn.Open();
        SqlCommand comm = new SqlCommand("select * from userInfo", conn);
        SqlDataReader sdr = comm.ExecuteReader();
        dt.Load(sdr);
        GridView1.AutoGenerateColumns = false;
        GridView1.AllowPaging = true;
        GridView1.PageSize = 5;
        GridView1.PageIndex = pageIndex;
        GridView1.DataSource = dt.DefaultView;
        GridView1.DataBind();
        conn.Close();
        sdr.Close();
    }

    /// <summary>
    /// 当页索引发生改变时
    /// </summary>
    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GVBinds(e.NewPageIndex);
    }

    /// <summary>
    /// 删除事件
    /// </summary>
    protected void Button1_Click(object sender, EventArgs e)
    {
        conn.Open();
        SqlCommand comm = new SqlCommand("delete from userInfo where userid in ("+Request["CheckBoxGroup"]+")",conn);
        
        if (comm.ExecuteNonQuery()>0)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(),"success","alert('删除成功');window.location='Default7.aspx'",true);
        }
        else
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(),"fail","alert('删除失败');",true);
        }
        conn.Close();
    }

    /// <summary>
    /// 光棒效果
    /// </summary>
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType==DataControlRowType.DataRow)
        {
            //注意这里的this.style.backgroundColor='#6699ff'中的'#6699ff'一定要加''号,因为输出的是脚本,加上''代表字符串.
            e.Row.Attributes.Add("onmouseover","currentColor=this.style.backgroundColor;this.style.backgroundColor='#6699ff'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentColor;");
            //给某个单元格也加上光棒效果,比如在博客的文章列表标题添加光帮效果.
            e.Row.Cells[2].Attributes.Add("onmouseover", "currentColor=this.style.backgroundColor;this.style.backgroundColor='black';");
            e.Row.Cells[2].Attributes.Add("onmouseout", "this.style.backgroundColor=currentColor");
        }
    }
}

 

  • 大小: 8.3 KB
分享到：
| C#中@的用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    GridView 单选和全选功能以及全选操作和取消全选

    在很多场景下，我们可能需要为GridView添加单选、多选以及全选和取消全选的功能，比如在图片选择器或者列表设置中。下面我们将详细探讨如何实现这些功能。 1. **GridView的基本使用** GridView继承自AbsListView，...

    C#_winform_GridView_CheckBox_多选_全选

    "C#_winform_GridView_CheckBox_多选_全选"这个主题就专门探讨了如何在WinForm的GridView中实现复选框的多选和全选功能。 首先，我们需要理解GridView的基本用法。GridView是.NET Framework中的System.Windows....

    gridview添加复选框批量操作代码

    总结，这个示例展示了如何在GridView中添加复选框，并利用JavaScript实现全选/全不选功能，以及在后台处理批量删除操作。在实际开发中，还需要考虑用户体验、数据验证、错误处理和安全性等多个方面，以构建健壮的...

    ASP.NET GridView中两种全选方法.txt

    在实际应用中，我们常常需要在`GridView`中实现“全选”功能，即通过一个全选复选框来控制表格中所有行的复选框的状态。本文将介绍两种在ASP.NET `GridView`中实现全选的方法：一种是服务器端实现方式，另一种是...

    GridView全选与批量删除

    3. 全选功能：为了实现全选功能，我们需要在GridView的列头添加一个复选框，通常设置为HeaderRow的第一列。通过JavaScript或者jQuery实现客户端的全选/反选，或者在服务器端处理SelectedIndexChanged事件来同步全选...

    GridView复选框(C#)

    ### GridView复选框(C#)知识点详解 #### 一、GridView控件简介 在ASP.NET Web应用程序中，`GridView`控件是一种非常强大的数据绑定控件，它能够以表格的形式展示来自数据库的数据，并且提供了丰富的功能，如排序、...

    gridview编辑删除，checkbox单选全选

    在本主题中，“gridview编辑删除，checkbox单选全选”指的是如何在GridView控件中实现行数据的编辑、删除功能，以及在每一行中添加复选框（Checkbox）进行单选或全选操作。以下将详细讲解这些知识点。 1. GridView...

    GridView实现多选,全选,反选功能

    在很多场合，我们需要实现GridView的多选、全选和反选功能，这在构建诸如联系人选择、图片选择等场景时非常实用。本篇文章将详细讲解如何在Android中实现GridView的这些高级功能。 首先，我们需要理解GridView的...

    gridview 全选和取消

    1. 添加复选框列：首先，我们需要在GridView的第一列添加一个复选框，这可以通过在GridView的列定义中添加TemplateField来完成。在HeaderTemplate中添加一个复选框，用于全选操作。 ```xml &lt;asp:GridView ID=...

    ASPXGridView实现全选

    ### ASPXGridView 实现全选功能详解 在Web开发中，`ASPxGridView` 控件是一种非常实用且功能丰富的工具，常被用于显示和管理数据表格。本文将深入探讨如何利用 `ASPxGridView` 实现全选功能，帮助开发者更好地理解...

    gridview全选（js实现）

    实现全选功能的第一步是在GridView的表头添加一个主复选框，当用户点击这个复选框时，所有行的复选框会被选中或取消选中。HTML代码示例如下： ```html &lt;table id="gridView"&gt; &lt;th&gt;&lt;input type="checkbox" id=...

    GridView使用div分页，checkbox全选

    - 在GridView的表头行添加一个checkbox，作为全选/全不选的控制项。 - 当用户勾选全选checkbox时，遍历GridView中的每一行，设置对应的行内checkbox为选中状态。 - 反之，当全选checkbox被取消选中时，取消所有...

    listView,Gridview全选反选关联及删除操作

    2. 在GridView或ListView的顶部添加一个复选框，作为全选/全不选的控制开关。 3. 当全选开关被选中时，遍历Adapter的数据集，将每个列表项的选中状态设置为true。 4. 反之，当全选开关取消选中时，将所有列表项的...

    GridView 内加全选按钮 客户端控制

    同时，为了确保全选按钮的状态与所有行的选中状态同步，可以在GridView的`RowDataBound`事件中添加代码，检查当前行的复选框是否被选中，然后更新全选按钮的状态。 ```csharp protected void gvData_RowDataBound...

    gridview里的全选

    1. 添加复选框列：在GridView中实现全选功能的第一步是在HeaderRow中添加一个复选框控件。这可以通过GridView的RowCreated事件来完成，检查是否为表头行，如果是，则添加复选框。 ```csharp protected void ...

    GridView客户端与服务器端全选方法合集

    在GridView中添加一个复选框作为全选按钮，当用户勾选该复选框时，触发JavaScript事件，遍历GridView中的所有行并选中它们。 ```html &lt;asp:GridView ID="gvData" runat="server"&gt; (this)" runat="server" /&gt; ...

    asp.net GridView控件中实现全选的解决方案

    1. 在 GridView 控件中添加一个全选复选框，该复选框位于表头（HeaderTemplate）中，并设置其事件处理器为一个服务器端的事件处理方法，如全选_CheckedChanged。 2. 编写全选_CheckedChanged 事件处理方法，在该方法...

    GridView全选实现代码

    该字段的`HeaderTemplate`用于放置全选复选框和文本“全选”，而`ItemTemplate`则用于在每一行显示一个复选框。 5. **绑定事件**：通过在HTML中的`&lt;input&gt;`标签上绑定`onclick`事件来调用`selectAll`函数，实现点击...

Magicbox
Global site tag (gtag.js) - Google Analytics