在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
以前做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() >
这里,随便弄个控件来触法“全选”和“反选”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)
} 功能到这里就完结了,下面给出全部实现代码: 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()
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 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论