jquery ajax實現(xiàn)批量刪除具體思路及代碼
更新時間：2013年04月07日 17:24:46 作者：
回調(diào)函數(shù)，在請求完成后需要進(jìn)行的操作：此處是把選中的checkbox去掉，接下來為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈，希望對你有所幫助
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>
回調(diào)函數(shù)，在請求完成后需要進(jìn)行的操作：此處是把選中的checkbox去掉（因為是用到了freemarker的list循環(huán)，去掉是數(shù)據(jù)后checkbox序號變化，還有有相應(yīng)未知的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";
}
效果圖:
復(fù)制代碼 代碼如下:
// 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>
回調(diào)函數(shù)，在請求完成后需要進(jìn)行的操作：此處是把選中的checkbox去掉（因為是用到了freemarker的list循環(huán)，去掉是數(shù)據(jù)后checkbox序號變化，還有有相應(yīng)未知的checkbox被選中，需要去掉）。
復(fù)制代碼 代碼如下:
success: function(result) {
$("[name = 'items']:checkbox").attr("checked", false);
window.location.reload();
}
java后臺代碼：
復(fù)制代碼 代碼如下:
@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";
}
效果圖:
您可能感興趣的文章:
- PHP jQuery+Ajax結(jié)合寫批量刪除功能
- PHP ajax+jQuery 實現(xiàn)批量刪除功能實例代碼小結(jié)
- JQuery+ajax實現(xiàn)批量上傳圖片(自寫)
- jQuery通過ajax快速批量提交表單數(shù)據(jù)
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- jQuery之a(chǎn)jax刪除詳解
- jQuery ajax中使用confirm,確認(rèn)是否刪除的簡單實例
- 如何從jQuery的ajax請求中刪除X-Requested-With
- jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法
- 基于php(Thinkphp)+jquery 實現(xiàn)ajax多選反選不選刪除數(shù)據(jù)功能
- jQuery+ajax實現(xiàn)批量刪除功能完整示例
相關(guān)文章
這篇文章主要介紹了Fly攔截全局Ajax請求的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
和大家一起聊一聊Ajax的優(yōu)缺點，Ajax是一個動態(tài)的WEB應(yīng)用的開發(fā)技術(shù)，它的出現(xiàn)豐富了用戶的體驗，今天就和大家進(jìn)一步的了解Ajax,感興趣的小伙伴們可以參考一下2016-02-02
JQuery ajax返回JSON時的處理方式 (三種方式)
json數(shù)據(jù)是一種經(jīng)型的實時數(shù)據(jù)交互的數(shù)據(jù)存儲方法，使用到最多的應(yīng)該是ajax與json配合使用了，下面由腳本之家小編給大家分享JQuery ajax返回JSON時的處理方式 (三種方式)，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了AJAX實現(xiàn)瀑布流布局的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
在使用ajax提交的時候?qū)⒎祷刂蒂x給一個變量，無論怎么寫都沒法賦值，剛開始懷疑js有錯但是ie沒有反應(yīng)過來，多次清緩存、部程序都沒效果2014-01-01
Ajax請求過程中下載文件在FireFox(火狐)瀏覽器下的兼容問題
最近做了個項目，其中有項目需求是這樣的，點擊一個文件鏈接下載該文件，同時向后臺發(fā)送請求，在開發(fā)過程中問題百出，小編把問題總結(jié)分享在腳本之家平臺，供大家參考2016-01-01
今天小編就為大家分享一篇快速解決ajax返回值給外部函數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
經(jīng)過前3篇的ajax實例教程的學(xué)習(xí)，我想各位已經(jīng)能夠使用ajax技術(shù)進(jìn)行簡單的數(shù)據(jù)讀取工作．2010-10-10
Axios是專注于網(wǎng)絡(luò)數(shù)據(jù)請求的庫，相比于原生的XMLHttpRequest對象，axios簡單易用。相比于Jquery，axios更加輕量化，只專注于網(wǎng)絡(luò)數(shù)據(jù)請求，這篇文章主要介紹了如何通過axios發(fā)起Ajax請求,需要的朋友可以參考下2022-11-11
AJAXCALL...2007-02-02