JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据

以前做web，基本没用过啥JS，这短时间，公司里面接触到的JS蛮多的，他们叫我在DataGrid里面的CheckBox弄个“全选”，要用JS来实现，来实现批量删除，这个功能，直接用C#是很好实现的，直接遍历就可以把选中的ID全部取出来。JS，那就只能用Html的CheckBox，这个不是服务器控件，C#后台代码是无法访问了，所以，再网上找了点资料，实现了。

首先，先定义一个DataGrid控件，先添加一个模板列，里面放一个Html的CheckBox，属性name=ChoessAll，（name，JS代码后面要用到）ID=chkChoessAll，绑定数据的唯一标识，这里是ID。

html（.aspx）代码如下：

<asp:GridView ID="gvUint" runat="server" AutoGenerateColumns="False" Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="选择">
                    <ItemTemplate>
                        <input id="chkChoessAll" name="ChoessAll" value=''<%# DataBinder.Eval(Container.DataItem, "ID")%>'' type="checkbox" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="楼盘名" />
                <asp:BoundField DataField="address" HeaderText="地址" />
            </Columns>
        </asp:GridView>

添加一个HiddenField控件（Html控件）属性ID=hfId，（ID，JS代码后面要用到）；选中的Check里面的数据的ID号。

现在实现JS代码：

<script type="text/javascript">
        //选择全部
        function CheckAll_Click()
        ...{
            if (document.form1.ChoessAll.length)
            ...{
                document.getElementById("hfId").value = ",";
                for (var i=0;i<document.form1.ChoessAll.length;i++)
                ...{
                    document.form1.ChoessAll[i].checked = true;
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
                }
            }
            else
            ...{
               document.form1.ChoessAll.checked = true;
            }
            //document.getElementById("btnShowID").click();
        }
        //反选
        function CheckReChange_Click()
        ...{
            if (document.form1.ChoessAll.length)
            ...{
                document.getElementById("hfId").value = ",";
                for (var i=0;i<document.form1.ChoessAll.length;i++)
                ...{
                    if(document.form1.ChoessAll[i].checked)
                    ...{
                        document.form1.ChoessAll[i].checked = false;
                    }
                    else
                    ...{
                        document.form1.ChoessAll[i].checked = true;
                    }
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
                }
            }
            else
            ...{
               document.form1.ChoessAll.checked = true;
            }
            //document.getElementById("btnShowID").click();
        }
        //删除数据事件（根据选择框删除）
        function Delete_Click()
        ...{
            if (document.form1.ChoessAll.length)
            ...{
                var num=0;
                document.getElementById("hfId").value = ",";
                for (var i=0;i<document.form1.ChoessAll.length;i++)
                ...{
                    if(document.form1.ChoessAll[i].checked)
                    ...{
                        document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
                        document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
                        num = num + 1;
                    }
                }
            }
            if(0==num)
            ...{
                return alert(''没有选中任何数据!'');
            }
            else
            ...{
                if(confirm(''确定要删除所选中的数据吗?''))
                ...{
                    document.getElementById("btnShowID").click();
                }
            }
        }
    </script>

这里，随便弄个控件来触法“全选”和“反选”JS函数

 <a href="#" onclick="CheckAll_Click();">全选</a>
 <a href="#" onclick="CheckReChange_Click();">反选</a>

到这里，已经可以实现了“全选”和“反选”功能了（看看，是不是无刷新）。

最后，实现，批量删除，这里，利用JS触法后台事件，添加一个服务器控件Button，ID=btnShowID（JS代码要使用），把他设置为隐藏，添加一句Html代码，来激发这个按钮的点击事件。

<a href="#" onclick="Delete_Click();">删除</a>

实现Button的后台事件：

 

protected void btnShowID_Click(object sender, EventArgs e)
...{
        //把这里的改成数据库操作就可以实现批量删除了
        labID.Text = hfId.Value.ToString().Trim();
        string[] strParam = hfId.Value.ToString().Split('','');
        for (int i = 0; i < strParam.Length; ++i)
        ...{
            this.Response.Write(strParam[i].ToString().Trim() + "<br>");
        }}

功能到这里就完结了，下面给出全部实现代码：

aspx：

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

<!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 CheckAll_Click()
        ...{
            if (document.form1.ChoessAll.length)
            ...{
                document.getElementById("hfId").value = ",";
                for (var i=0;i<document.form1.ChoessAll.length;i++)
                ...{
                    document.form1.ChoessAll[i].checked = true;
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
                }
            }
            else
            ...{
               document.form1.ChoessAll.checked = true;
            }
            //document.getElementById("btnShowID").click();
        }
        //反选
        function CheckReChange_Click()
        ...{
            if (document.form1.ChoessAll.length)
            ...{
                document.getElementById("hfId").value = ",";
                for (var i=0;i<document.form1.ChoessAll.length;i++)
                ...{
                    if(document.form1.ChoessAll[i].checked)
                    ...{
                        document.form1.ChoessAll[i].checked = false;
                    }
                    else
                    ...{
                        document.form1.ChoessAll[i].checked = true;
                    }
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
//                    document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
                }
            }
            else
            ...{
               document.form1.ChoessAll.checked = true;
            }
            //document.getElementById("btnShowID").click();
        }
        //删除数据事件（根据选择框删除）
        function Delete_Click()
        ...{
            if (document.form1.ChoessAll.length)
            ...{
                var num=0;
                document.getElementById("hfId").value = ",";
                for (var i=0;i<document.form1.ChoessAll.length;i++)
                ...{
                    if(document.form1.ChoessAll[i].checked)
                    ...{
                        document.getElementById("hfId").value = document.getElementById("hfId").value + document.form1.ChoessAll[i].value;
                        document.getElementById("hfId").value = document.getElementById("hfId").value + ",";
                        num = num + 1;
                    }
                }
            }
            if(0==num)
            ...{
                return alert(''没有选中任何数据!'');
            }
            else
            ...{
                if(confirm(''确定要删除所选中的数据吗?''))
                ...{
                    document.getElementById("btnShowID").click();
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="#" onclick="Delete_Click();">删除</a>
    </div>
    <div>
        <asp:GridView ID="gvUint" runat="server" AutoGenerateColumns="False" Width="100%">
            <Columns>
                <asp:TemplateField HeaderText="选择">
                    <ItemTemplate>
                        <input id="chkChoessAll" name="ChoessAll" value=''<%# DataBinder.Eval(Container.DataItem, "ID")%>'' type="checkbox" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="楼盘名" />
                <asp:BoundField DataField="address" HeaderText="地址" />
            </Columns>
        </asp:GridView>
    </div>
        <a href="#" onclick="CheckAll_Click();">全选</a>
        <a href="#" onclick="CheckReChange_Click();">反选</a>
        <asp:Label ID="labID" runat="server"></asp:Label>
    <div>
        <asp:HiddenField ID="hfId" runat="server" />
        <asp:Button ID="btnShowID" runat="server" Text="btnShowID" OnClick="btnShowID_Click" style="display:none"/></div>
    </form>
</body>
</html>

cs：

using System;
using System.Data;
using System.Configuration;
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 _Default : System.Web.UI.Page 
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void btnShowID_Click(object sender, EventArgs e)
    ...{
        //把这里的改成数据库操作就可以实现批量删除了
        labID.Text = hfId.Value.ToString().Trim();
        string[] strParam = hfId.Value.ToString().Split('','');
        for (int i = 0; i < strParam.Length; ++i)
        ...{
            this.Response.Write(strParam[i].ToString().Trim() + "<br>");
        }
    }
}

时间： 2024-10-22 03:59:54

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据的相关文章

js多兼容全选/反选代码

js多兼容全选/反选代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js多兼容全选/反选代码</title> <script language="javascript教程">  function Choose(sel, arg) //传递2个参数,分别是表名,选

js复选框全选 反选代码

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="con

Jquery CheckBox全选方法代码附js checkbox全选反选代码_jquery

jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

js动态获取子复选项并设计全选及提交的实现方法_javascript技巧

在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加上onclick事件,并默认类别1为选择状态. <input type="checkbox" name="selectall" id="selectall" onClick="selectAll();" checked=&q

JS 全选/反选Checkbox几个不错的实例

利用JS,全选FORM中的所有CHECKBOX. Javascript代码:  代码如下 复制代码 <SCRIPT language=javaScript>          //全选或全部不选      function checkall() {          var isChecked=(document.form1.checkAll.checked == true);          var elements_all=document.form1.elements;        

jsp+js实例批量删除数据

jsp+js实例批量删除数据 jsp获取数据存入数据,然后生成合法sql语句 String action =request.getParameter("action"); String[] name=request.getParameterValues("box"); String deng=""; String spl=","; if( action == null ) {  action="my"; }

jquery、js操作checkbox全选反选

 全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选   代码如下: //全选  function checkAll() {  $('input[name="TheID"]').attr("checked", "checked");  }  //反选  function uncheckAll() {  $('input[name="TheID"]').each(fu

jquery、js操作checkbox全选反选_javascript技巧

操作checkbox,全选反选 复制代码 代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }

利用jQuery实现CheckBox全选/全不选/反选的简单代码_jquery

jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional

asp.net gridview实现全选,反选与删除记录的操作代码_实用技巧

gridview全选操作 复制代码 代码如下: 'columns'=>array( array( 'class'=>'CCheckBoxColumn', //'header'=>'全选', //'value'=>'$data->id', //'checked'=>'true', 'htmlOptions'=>array( 'width'=>'30', 'style'=>'text-align:center', ), ), 复制代码 代码如下: <