ajax批量删除功能的实现源代码

最新推荐文章于 2024-02-07 15:49:35 发布
最新推荐文章于 2024-02-07 15:49:35 发布
阅读量230 收藏
点赞数
原文链接：http://www.cnblogs.com/idjl/p/9610508.html
版权

效果展示：

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Ding Jianlong Html</title>
    <link  href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/layer/2.4/skin/layer.min.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<button class="btn btn-danger radius" onClick="batch_del()" style='margin:10px;'>批量删除</button>
	    <table style="width: 500px;" class="table table-striped table-hover table-bordered">
			<thead>
				<tr>
					<th scope='col' width="25"><input type="checkbox" value="" name="selectall"></th>
					<th scope='col' width="80">ID</th>
					<th scope='col' >标题</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" value="10001"></td>
					<td>10001</td>
					<td >标题1</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="10002"></td>
					<td>10002</td>
					<td >标题2</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="10003"></td>
					<td>10003</td>
					<td >标题3</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="10004"></td>
					<td>10004</td>
					<td >标题4</td>
				</tr>
				<tr>
					<td><input type="checkbox" value="10005"></td>
					<td>10005</td>
					<td >标题5</td>
				</tr>
			</tbody>
		</table>
	</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.4/layer.min.js"></script>
<script>
	/*批量选中的效果*/
	$('input:checkbox[name="selectall"]').click(function(){
		if($(this).is(':checked')){
	        $('input:checkbox').each(function(){
	    		$(this).prop("checked",true);
			});
        }else{
           	$('input:checkbox').each(function(){
    			$(this).prop("checked",false);
			});
        }
	});

	/*获取ids,批量删除*/
    function batch_del() {
        var ids = '';
        $('input:checkbox').each(function(){
            if(this.checked == true){
                ids += this.value + ',';
            }
        });
        //layer.alert(ids);return;
        //下面的ajax根据自己的情况写
        layer.confirm('批量删除后不可恢复，谨慎操作！', {icon: 7, title: '警告'}, function (index) {
            $.ajax({
                type: 'POST',
                url: '你的url地址?ids=' + ids,
                data: {"1": "1"},
                dataType: 'json',
                success: function (data) {
                    if (data.code == 200) {
                        $(obj).parents("tr").remove();
                        layer.msg(data.message, {icon: 1, time: 1000});
                    } else {
                        layer.msg(data.message, {icon: 2, time: 3000});
                    }

                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
        });
    }
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/idjl/p/9610508.html

weixin_30696427
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax复选框多选删除的实现
amazingdyd的博客
05-04 2240
AJAX多选删除的思路是通过控制器从后台删除数据，然后前台的数据是不会刷新的，我们需要用JQUERY把前台的数据也删掉。 首先，引用JQUERY 然后，写出一个个的复选框，其中之一是这样 ... id}}"> {{$c->user->name}} .
利用ajax实现多选批量删除功能
acaointerbill的博客
09-06 2654
$(function() { $("#checkAll").click(function(){//给全选按钮加上点击事件 var xz = $(this).prop("checked");//判断全选按钮的选中状态 var ck = $("[name='subBox']").prop("checked",xz); //让class名为qx的选项的选中状态和全选按钮的选...
Ajax批量删除
weixin_44123996的博客
07-18 243
今天老师讲了通过勾选框实现批量删除的功能，同时利用Ajax更新用户列表，而不必重新加载页面。 在IUserinfoDao.java中加上deleteAll()函数： public void deleteAll(List<Integer> ids); 在UserMapper.xml中加上sql语句： <delete id="deleteAll" parameterType="li...
Ajax批量删除代码 （简单思路）两种
weixin_45873488的博客
12-30 585
1.当点击批量删除的时候，通过循环每一条记录找到id，ajax传递到后台逐条删除。 ```java <c:forEach items="${carList}" var="car" varStatus="l"> <div class="speCific" data-id="${car.id}"> <div class="xzWxz"> <b><img src="static-user
JAVA上百实例源码以及开源项目源代码
09-17
Java源代码实现部分，比较有意思，也具参考性。像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java...
JavaScript完全自学宝典 源代码
12-31
1．本书1~21章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：UltraEdit12.10a、eclipse-jee-europa Web浏览器：Microsoft Internet Explorer 6.0及以上版本 ...
ASP.NET 无刷新分页实例（Access）
03-16
内容索引:.NET源码,Ajax相关,无刷新分页,Ajax　下运用Ajax技术实现的无刷新分页程序，带Access数据库，源代码生成于vs2008，AJAX技术采用的是jQuery+Json，更详细一点就是使用ashx接收请求，数据格式为JSON，交由...
基于SSH的网上书城_j2ee专周_源代码+数据库(oracle)+课程设计报告
07-10
3) 该页面使用AJAX,实现部分刷新(由其他同学负责) d. 底层代码负责块 编写有关订单的dao层,service层,action层代码 e. 三味书屋设计特色 1) 用户添加订单多样化—设置购物车(批量购买),立即购买 2) 设置点击量字段,...
jquery ajax实现批量删除具体思路及代码
10-27
回调函数，在请求完成后需要进行的操作：此处是把选中的checkbox去掉，接下来为大家详细介绍下，感兴趣的朋友可以参考下哈，希望对你有所帮助
批量删除源代码
04-24
批量删除，可全选 可反选..具体操作可以从代码中看出。
java批量删除
09-26
批量删除，速度快,效率高，代码不是问题，重要的是人品
Ajax批量删除与单删
ProteaCynaroides的博客
02-23 421
<input id="Button1" type="button" value="批量删除" onclick="dels()" /> //批量删除 function dels() { if (!confirm("确认删除？")) { return; } var arr = []; $("...
Ajax批量删除操作
Jingjingjng0504的博客
07-18 216
1.关于Ajax a) ·Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 b) Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。 c) Ajax 是一种用于创建快速动态网页的技术。 d) Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ...
jquery ajax实现批量删除具体思路及代码
ouxiaoxian的博客
03-19 1874
显示页面代码// 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.checked); }); // 单选 //var subChk = $("input[name='subChk']") //subChk.click(function() { //$("#allChk").prop(".
编码技巧——批量删除数据
最新发布
娜娜米的博客
02-07 362
今天遇到个业务场景需要批量根据索引删除数据，ORM框架为mybatis，跟以往遇到的根据MySQL主键批量删除不同，本次使用的数据库时PgSQL，使用的联合主键索引；搜索相关资料网上大部分帖子都是使用类似whereidin (...)的写法，直到找到花了点时间才找到合适的写法，现在总结下；
Java实现多选批量删除,含前后端相关代码
热门推荐
见证自己学习,成长的记录
08-24 1万+
本文介绍如何使用Java实现多选批量删除
spring boot 配合element ui vue实现表格的批量删除（前后端详细教学，简单易懂，有手就行）
qq_60614034的博客
02-28 4214
研究了其他人的博客，找到了一篇有含金量的，进行了部分改写实现前后端分离，参考博主为小白Rachel先看看页面效果，要是符合你们所需的功能那就继续看下去1406 1407 被干掉了。
ajax添加功能怎么实现代码
06-10
这里给出一个基于 jQuery 的 AJAX 添加功能的示例代码。 HTML 代码： ```html 姓名： 年龄： 添加 ``` JavaScript 代码： ```javascript $(function() { // 监听表单提交事件 $("#add-form")...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值