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";

}

效果图:

时间: 2024-09-10 02:24:56

jquery ajax实现批量删除具体思路及代码的相关文章

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

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

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

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

jquery ajax 请求一直返回当前页面HTML代码

问题描述 jquery ajax 请求一直返回当前页面HTML代码 前端JS var names =$(""#names"").val(); if(isNull(names)){ alertMsg({'msg':'请输入姓名!'}); return; } var job_number =$(""#job_number"").val(); if(isNull(job_number)){ alertMsg({'msg':'请输入工

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

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

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

直接贴代码吧 $("#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+ajax实现批量上传图片

在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的. 先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下:

JQuery+ajax实现批量上传图片(自写)_AJAX相关

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

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

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

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

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