jquery ajax实现批量删除具体思路及代码

js页面jquery代码


代码如下:

// JavaScript Document
$(document).ready(function() {
// 全选
$("#allChk").click(function() {
$("input[name='subChk']").prop("checked",this.checked);
});
// 单选
var subChk = $("input[name='subChk']")
subChk.click(function() {
$("#allChk").prop("checked", subChk.length == subChk.filter(":checked").length ? true:false);
});
/* 批量删除 */
$("#del_model").click(function() {
// 判断是否至少选择一项
var checkedNum = $("input[name='subChk']:checked").length;
if(checkedNum == 0) {
alert("请选择至少一项!");
return;
}
// 批量选择
if(confirm("确定要删除所选项目?")) {
var checkedList = new Array();
$("input[name='subChk']:checked").each(function() {
checkedList.push($(this).val());
});
$.ajax({
type: "POST",
url: "deletemore",
data: {'delitems':checkedList.toString()},
 success: function(result) {
$("[name ='subChk']:checkbox").attr("checked", false);
window.location.reload();
}
});
}
});
});
页面元素
<a href="#" id="del_model"><span>删除用户</span>
<th class="tal"><input type="checkbox" id="allChk"/>全选</th>
<td><input type="checkbox" name="subChk" value="${user.id}"/></td>

回调函数,在请求完成后需要进行的操作:此处是把选中的checkbox去掉(因为是用到了freemarker的list循环,去掉是数据后checkbox序号变化,还有有相应未知的checkbox被选中,需要去掉)。


代码如下:

success: function(result) {
$("[name = 'items']:checkbox").attr("checked", false);
window.location.reload();
}

java后台代码


代码如下:

@RequestMapping(value = "/deletemore", method = RequestMethod.POST)
public String deleteMore(HttpServletRequest request, HttpServletResponse response) {
String items = request.getParameter("delitems");
String[] item = items.split(",");
for (int i = 0; i < item.length; i++) {
userService.delete(Integer.parseInt(item[i]));
}
return "redirect:list";
}

效果图:

(0)

相关推荐

  • PHP jQuery+Ajax结合写批量删除功能

    为了美观,我还是引入了bootstrap的模态框,我引入的是自己的数据库 library中的一张表 名为:maninfo表 是一张个人信息表 表的加载我就不写了,比较简单,  大概写一下需要的按钮和html部分就可以了 <button type="button" class="btn btn-primary" id="plscdz" >批量删除</button> 全选: <input type="check

  • javaScript checkbox 全选/反选及批量删除

    前台代码 复制代码 代码如下: <script type="text/javascript"> var a; function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.docum

  • JS实现复选框的全选和批量删除功能

    如图示: 功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选.如果点击批量删除,删除所勾选的商品. <td align="center" width="12%" > <input type="checkbox" id="allChecks" onclick="ckAll()" /> 全选/全不选 </td> //全选 function ckAl

  • jsp Hibernate批量更新和批量删除处理代码

    以下程序直接通过Hibernate API批量更新CUSTOMERS表中年龄大于零的所有记录的AGE字段: tx = session.beginTransaction();Iterator customers=session.find("from Customer c where c.age>0").iterator();while(customers.hasNext()){Customer customer=(Customer)customers.next();customer

  • jquery ajax实现批量删除具体思路及代码

    js页面jquery代码: 复制代码 代码如下: // JavaScript Document $(document).ready(function() { // 全选 $("#allChk").click(function() { $("input[name='subChk']").prop("checked",this.checked); }); // 单选 var subChk = $("input[name='subChk']&

  • jQuery+ajax实现批量删除功能完整示例

    本文实例讲述了jQuery+ajax实现批量删除功能.分享给大家供大家参考,具体如下: 效果展示: 完整代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

  • Asp.net利用JQuery AJAX实现无刷新评论思路与代码

    首先在数据库中就建三个字段的表用来存储用户名和评论信息,Id只是为了设置唯一标示,所以设置成整型自增字段就行了. 再建一个HTML页面,只需简单的拉几个html控件出来摆着就行,注意在页面顶部有个<table>标签用来占位输出评论内容. Html页面代码就这样简单就行了: 复制代码 代码如下: <body><table id="room"> </table> <div> 用户名:<input id="Text1

  • Jquery ajax请求导出Excel表格的实现代码

    直接贴代码吧 $("#btn-export").click(function(){ var exportExcel = "export_excel"; dataParams[exportExcel] = 1; var params = $.param(dataParams); var url = host+"&"+params; $('<form method="post" action="' + ur

  • JQuery给select添加/删除节点的实现代码

    jQuery获取Select选择的Text和Value: var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value var checkIndex=jQuery("#select_id &qu

  • jQuery Ajax 异步加载显示等待效果代码分享

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • JQuery+ajax实现批量上传图片(自写)

    在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的.先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下: 上传成功如下图: 下面来看代码:前台html主要代码: 复制代码 代码如下: <button id="SubUpload" class="ManagerButton" onClick="TSubmitUpl

  • jQuery动态添加与删除tr行实例代码

    这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

  • Jquery post传递数组方法实现思路及代码

    以批量删除数据为例 做批量删除会需要传递要删除的数据ID数组 复制代码 代码如下: function RemoveLog(){ var postModel=[]; //遍历复选框获取要删除的数据ID 存放到数组中  $("[name='lid']").each(function () { if ($(this).attr("checked") == "checked") postModel.push({ name: 'ids', value:$(

随机推荐