Ajax的批量删除

最新推荐文章于 2021-12-01 17:40:58 发布
最新推荐文章于 2021-12-01 17:40:58 发布
阅读量145 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40613503/article/details/96470879
版权

Ajax的批量删除

Ajax的批量删除

a)·Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
b)Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。
c)Ajax 是一种用于创建快速动态网页的技术。
d)Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

  • user-list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">

<!-- Tell the browser to be responsive to screen width -->
<meta
   content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
   name="viewport">

<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
   href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
   	function deleteAll() {
   		var checkedNum = $("input[name='ids']:checked").length;
   		if(checkedNum == 0){
   			alert("至少选择一项进行删除！");
   			return;
   		}

   		if(confirm("确定删除选中的用户？")){
   			var userList = new Array();
   			$("input[name='ids']:checked").each(function () {
   				userList.push($(this).val());
   			});
   		}


   		$.ajax({
   			type: "post",
   			url: "${pageContext.request.contextPath}/user/batchDelete.do",
   			data: {userList : userList.toString()},
   			success : function () {
   				alert("删除成功！");
   				location.reload();
   			},

   			error : function () {
   				alert("删除失败！");
   			}
   		});
   	}
</script>








   </head>

<body class="hold-transition skin-blue sidebar-mini">

   <div class="wrapper">

   	<!-- 页面头部 -->
   	<jsp:include page="header.jsp"></jsp:include>
   	<!-- 页面头部 /-->

   	<!-- 导航侧栏 -->
   	<jsp:include page="aside.jsp"></jsp:include>
   	<!-- 导航侧栏 /-->

   	<!-- 内容区域 -->
   	<div class="content-wrapper">

   		<!-- 内容头部 -->
   		<section class="content-header">
   		<h1>
   			用户管理 <small>全部用户</small>
   		</h1>
   		<ol class="breadcrumb">
   			<li><a href="#"><i
   					class="fa fa-dashboard"></i> 首页</a></li>
   			<li><a
   				href="#">用户管理</a></li>

   			<li class="active">全部用户</li>
   		</ol>
   		</section>
   		<!-- 内容头部 /-->

   			<!-- 正文区域 -->
   			<section class="content"> <!-- .box-body -->
   			<div class="box box-primary">
   				<div class="box-header with-border">
   					<h3 class="box-title">列表</h3>
   				</div>

   				<div class="box-body">

   					<!-- 数据表格 -->
   					<div class="table-box">

   						<!--工具栏-->
   						<div class="pull-left">
   							<div class="form-group form-inline">
   								<div class="btn-group">
   									<button type="button" class="btn btn-default" title="新建"
   											onclick="location.href='${pageContext.request.contextPath}/pages/user-add.jsp'" >
   										<i class="fa fa-file-o"></i> 新建
   									</button>
   									
   									<button type="button" class="btn btn-default" title="批量删除"
   										onclick="deleteAll()"
   									>
   										<i class="fa fa-refresh"></i> 批量删除
   									</button>
   									<td></td>
   								</div>
   							</div>
   						</div>
   						<form action="${pageContext.request.contextPath}/user/findUserByName.do"
   							  method="post">
   							<div class="col-md-4 data1">
   								<input type="text" class="form-control" name="username"
   									   placeholder="username" value="">
   							</div>
   							<button type="submit" class="btn bg-maroon">搜索</button>
   						</form>
   						<!--工具栏/-->

   						<!--数据列表-->
   						<table id="dataList"
   							class="table table-bordered table-striped table-hover dataTable">
   							<thead>
   								<tr>
   									<th class="" style="padding-right: 0px">
   										<input name="ids" id="selall" type="checkbox" class="icheckbox_square-blue">
   									</th>
   									<th class="sorting_asc">ID</th>
   									<th class="sorting_desc">用户名</th>
   									<th class="sorting_asc sorting_asc_disabled">密码</th>
   									<th class="text-center">操作</th>
   								</tr>
   							</thead>
   							<tbody>
   							    <c:forEach var="user" items="${pageInfo.list}">
   									<tr>
   										<td><input name="ids"  value="${user.id}" type="checkbox"></td>
   										<td>${user.id}</td>
   										<td>${user.username}</td>
   										<td>${user.password}</td>
   										<td class="text-center">
   											<a href="${pageContext.request.contextPath}/user/findUserById.do?id=${user.id}" class="btn bg-olive btn-xs">更新</a>
   											<a href="${pageContext.request.contextPath}/user/delUser.do?id=${user.id}" class="btn bg-olive btn-xs">删除</a>
   											<a href="#" class="btn bg-olive btn-xs">添加角色</a>
   										</td>
   									</tr>
   								</c:forEach>
   							</tbody>
   							<!--
                           <tfoot>
                           <tr>
                           <th>Rendering engine</th>
                           <th>Browser</th>
                           <th>Platform(s)</th>
                           <th>Engine version</th>
                           <th>CSS grade</th>
                           </tr>
                           </tfoot>-->
   						</table>
   						<!--数据列表/-->

   					</div>
   					<!-- 数据表格 /-->

   				</div>
   				<!-- /.box-body -->
   					<div class="box-tools pull-right">
   						<ul class="pagination">
   							<li><a href="${pageContext.request.contextPath}/user/finAll.do?page=1&size=5" aria-label="Previous">首页</a></li>
   							<li><a href="${pageContext.request.contextPath}/user/finAll.do?page=${pageInfo.pageNum-1}&size=5">上一页</a></li>

   							<c:forEach begin="1" end="${pageInfo.pages}" var="pagenum">
   								<li><a href="${pageContext.request.contextPath}/user/finAll.do?page=${pagenum}&size=5">${pagenum}</a></li>
   							</c:forEach>



   							<li><a href="${pageContext.request.contextPath}/user/finAll.do?page=${pageInfo.pageNum+1}&size=5">下一页</a></li>
   							<li><a href="${pageContext.request.contextPath}/user/finAll.do?page=${pageInfo.pages}&size=5" aria-label="Next">尾页</a></li>
   						</ul>
   					</div>

   				</div>
   				<!-- /.box-footer-->




   			</section>
   			<!-- 正文区域 /-->

   		</div>
   		<!-- @@close -->
   		<!-- 内容区域 /-->

   		<!-- 底部导航 -->
   		<footer class="main-footer">
   		<div class="pull-right hidden-xs">
   			<b>Version</b> 1.0.8
   		</div>
   		<strong>Copyright &copy; 2014-2017 <a
   			href="http://www.itcast.cn">研究院研发部</a>.
   		</strong> All rights reserved. </footer>
   		<!-- 底部导航 /-->

   	</div>

   	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
   	<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
   	<script>
   		$.widget.bridge('uibutton', $.ui.button);
   	</script>
   	<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
   	<script src="../plugins/raphael/raphael-min.js"></script>
   	<script src="../plugins/morris/morris.min.js"></script>
   	<script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
   	<script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
   	<script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
   	<script src="../plugins/knob/jquery.knob.js"></script>
   	<script src="../plugins/daterangepicker/moment.min.js"></script>
   	<script src="../plugins/daterangepicker/daterangepicker.js"></script>
   	<script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
   	<script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
   	<script
   		src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
   	<script
   		src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
   	<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
   	<script src="../plugins/fastclick/fastclick.js"></script>
   	<script src="../plugins/iCheck/icheck.min.js"></script>
   	<script src="../plugins/adminLTE/js/app.min.js"></script>
   	<script src="../plugins/treeTable/jquery.treetable.js"></script>
   	<script src="../plugins/select2/select2.full.min.js"></script>
   	<script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
   	<script
   		src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
   	<script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
   	<script
   		src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
   	<script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
   	<script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
   	<script src="../plugins/ckeditor/ckeditor.js"></script>
   	<script src="../plugins/input-mask/jquery.inputmask.js"></script>
   	<script
   		src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
   	<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
   	<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
   	<script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
   	<script src="../plugins/chartjs/Chart.min.js"></script>
   	<script src="../plugins/flot/jquery.flot.min.js"></script>
   	<script src="../plugins/flot/jquery.flot.resize.min.js"></script>
   	<script src="../plugins/flot/jquery.flot.pie.min.js"></script>
   	<script src="../plugins/flot/jquery.flot.categories.min.js"></script>
   	<script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
   	<script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
   	<script>
   		$(document).ready(function() {
   			// 选择框
   			$(".select2").select2();

   			// WYSIHTML5编辑器
   			$(".textarea").wysihtml5({
   				locale : 'zh-CN'
   			});
   		});

   		// 设置激活菜单
   		function setSidebarActive(tagUri) {
   			var liObj = $("#" + tagUri);
   			if (liObj.length > 0) {
   				liObj.parent().parent().addClass("active");
   				liObj.addClass("active");
   			}
   		}

   		$(document)
   				.ready(
   						function() {

   							// 激活导航位置
   							setSidebarActive("admin-datalist");

   							// 列表按钮 
   							$("#dataList td input[type='checkbox']")
   									.iCheck(
   											{
   												checkboxClass : 'icheckbox_square-blue',
   												increaseArea : '20%'
   											});
   							// 全选操作 
   							$("#selall")
   									.click(
   											function() {
   												var clicks = $(this).is(
   														':checked');
   												if (!clicks) {
   													$(
   															"#dataList td input[type='checkbox']")
   															.iCheck(
   																	"uncheck");
   												} else {
   													$(
   															"#dataList td input[type='checkbox']")
   															.iCheck("check");
   												}
   												$(this).data("clicks",
   														!clicks);
   											});
   						});
   	</script>
</body>

</html>
  • UserDao
//批量删除
   void batchDelete(List<Integer> ids);
  • UserMapper.xml
<!--批量删除-->
   <delete id="batchDelete" parameterType="list">
       delete from tb_user where id in
       <foreach collection="list" item="id" open="(" close=")" separator=",">
           #{id}
       </foreach>
   </delete>
  • UserInfoController
//批量删除
   @RequestMapping("/batchDelete.do")
   public String batchDelete(String userList){
       String[] strs = userList.split(",");
       List<Integer> ids = new ArrayList<>();
       for(int i = 0; i<strs.length;i++){
           ids.add(Integer.parseInt(strs[i]));
       }
       userInfoService.batchDelete(ids);
       return "redirect:finAll.do";
   }
qq_40613503
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSM框架下的分页实现
lixing123123的博客
07-02 186
工具 idea 2018.2 moven 3.6 mysql 5.5 JDK1.8 tomcat 8.0 一、导入jar包 在pom.xml中导入Pagehelper的jar包 在applicationContext.xml中添加数据库配置 二、添加page、size信息 在原本findall()的条件下，在userservice接口中添加参数int page,int s...
SSM框架分页实现
04-10
SSM框架分页实现,我们添加了分页模块代码,自己手动实现分页, 1:创建page类(start,count)
在之前完成的系统上增加分页
qq_41411003的博客
07-02 191
导入jar包 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.2</version> ...
ajax批量删除
zb0109的博客
12-01 2401
<th><input type="checkbox" class="checkAll"></th> <td><input type="checkbox" class="checks" value="{$val.id}"></td> // 全选全不选 $('.checkAll').click(function (){ $('.checks').prop('checked',$(this).prop('ch.
ajax 批量删除
porridge_zyc的博客
11-18 2619
JSP页面： } //批量删除 function batchDelete(){ var strs=""; var ids=demoGrid.getSelectedRows(); for(var i=0;i strs+=ids[i].id+","; } if(strs==""){ $.ligerDialog.error('请勾选数据!'); return; } $
jQuery+ajax实现批量删除功能完整示例
10-16
这个例子展示了如何利用jQuery、ajax和bootstrap创建一个用户友好的批量删除功能。通过使用layer.js插件，我们可以提供交互式的确认对话框，确保用户在删除操作之前有足够的时间思考。整个流程包括前端的选中项收集...
jquery ajax实现批量删除具体思路及代码
10-27
在本文中，我们将深入探讨如何使用jQuery AJAX 实现批量删除功能。批量删除是常见的Web应用需求，它允许用户一次选择多个项目并一次性删除。这里，我们主要关注前端jQuery的实现和后端处理。 首先，批量删除的核心...
PHP jQuery+Ajax结合写批量删除功能
10-19
主要介绍了PHP jQuery+Ajax结合写批量删除功能的相关资料,需要的朋友可以参考下
js实现批量删除功能
10-14
在JavaScript中实现批量删除功能是常见的...总的来说，批量删除功能的核心在于正确地收集用户的选择，通过AJAX发送请求，以及与后端服务的交互。通过这个示例，我们可以看到如何使用JavaScript和jQuery来实现这一功能。
利用ajax实现多选批量删除功能
acaointerbill的博客
09-06 2658
$(function() { $("#checkAll").click(function(){//给全选按钮加上点击事件 var xz = $(this).prop("checked");//判断全选按钮的选中状态 var ck = $("[name='subBox']").prop("checked",xz); //让class名为qx的选项的选中状态和全选按钮的选...
SSM框架分页的实现
05-20
SSM框架分页的实现 SSM框架分页的实现SSM框架分页的实现SSM框架分页的实现
jquery ajax 实现批量删除
面向太阳、骄傲的活着
04-03 2729
jsp页面jquery代码： // JavaScript Document $(document).ready(function() { // 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.
Ajax批量删除
weixin_44123996的博客
07-18 247
今天老师讲了通过勾选框实现批量删除的功能，同时利用Ajax更新用户列表，而不必重新加载页面。 在IUserinfoDao.java中加上deleteAll()函数： public void deleteAll(List<Integer> ids); 在UserMapper.xml中加上sql语句： <delete id="deleteAll" parameterType="li...
AJAX批量删除
qq_41427653的博客
07-18 196
在学习AJAX批量删除之前先完成了对页面的修改 aside.js 头部插入 <%@taglib prefix=“security” uri=“http://www.springframework.org/security/tags” %> 在页面在线之上加入用户名 再给用户管理加上权限保护 <security:authorize access="ha...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值