JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
来源:互联网 发布:2016网络黑色产业链 编辑:程序博客网 时间:2024/06/06 10:38
以前做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>");
}
}
}
- JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
- JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
- js调用后台代码
- js调用后台代码
- C#前台js调用后台代码
- C#前台js调用后台代码
- C#前台js调用后台代码和后台代码调用前台js
- 用JS代码调用后台CS代码
- C#后台调用JS
- asp.net js与后台C#代码相互调用
- Javascript (js)调用后台代码方法汇总
- js实现全选反选实例代码
- 后台调用JS文件 c#
- 后台C#调用js脚本
- c#后台调用前台JS
- c# 后台调用前台JS
- js调用c#后台方法
- C# js调用后台方法
- Jdeveloper ADF四大业务要素的关系
- java 序列化 和反序列化
- FileUpload选中图片后就可以预览
- Eclipse文件改变编码插件
- 互联网电视的本质
- JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
- 致新手:用VB6解决一些有趣的问题(九)
- 28 句人际关系句 4.8
- js动态添加删除,后台取数据
- sockaddr 和 sockaddr_in 的差别和联系
- MyEclipse 8.x 关闭自动更新方法
- fork与clone
- maven项目中自动下载jar包的pom.xml配置
- MFC中Doc,View,MainFrmae,App各指针的互相获取