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

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

html(.aspx)代码如下:

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据<asp:GridView ID="gvUint" runat="server" AutoGenerateColumns="False" Width="100%">
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据            
<Columns>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                
<asp:TemplateField HeaderText="选择">
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                    
<ItemTemplate>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                        
<input id="chkChoessAll" name="ChoessAll" value='<%# DataBinder.Eval(Container.DataItem, "ID")%>' type="checkbox" />
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                    
</ItemTemplate>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                
</asp:TemplateField>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                
<asp:BoundField DataField="ID" HeaderText="楼盘名" />
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据                
<asp:BoundField DataField="address" HeaderText="地址" />
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据            
</Columns>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据        
</asp:GridView>

添加一个HiddenField控件(Html控件)属性ID=hfId,(ID,JS代码后面要用到);选中的Check里面的数据的ID号。

现在实现JS代码:

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据<script type="text/javascript">
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据        
//选择全部
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
        function CheckAll_Click()
>

 

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

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据 <a href="#" onclick="CheckAll_Click();">全选</a>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据 
<a href="#" onclick="CheckReChange_Click();">反选</a>

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

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

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据<a href="#" onclick="Delete_Click();">删除</a>

实现Button的后台事件:

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据protected void btnShowID_Click(object sender, EventArgs e)
}

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

aspx:

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
<html xmlns="http://www.w3.org/1999/xhtml" >
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
<head runat="server">
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据    
<title>无标题页</title>
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据    
<script type="text/javascript">
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据        
//选择全部
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
        function CheckAll_Click()

 

cs:

JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据using System;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Data;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Configuration;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Web;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Web.Security;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Web.UI;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Web.UI.WebControls;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Web.UI.WebControls.WebParts;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Web.UI.HtmlControls;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
using System.Data.SqlClient;
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
JS调用C#后台代码---JS实现DataGrid“全选”、“反选”、调用后台代码批量删除数据
public partial class _Default : System.Web.UI.Page 

相关文章: