jquery ajax實(shí)現(xiàn)批量刪除具體思路及代碼
更新時(shí)間:2013年04月07日 17:24:46 作者:
回調(diào)函數(shù),在請(qǐng)求完成后需要進(jìn)行的操作:此處是把選中的checkbox去掉,接下來(lái)為大家詳細(xì)介紹下,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助
js頁(yè)面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() {
// 判斷是否至少選擇一項(xiàng)
var checkedNum = $("input[name='subChk']:checked").length;
if(checkedNum == 0) {
alert("請(qǐng)選擇至少一項(xiàng)!");
return;
}
// 批量選擇
if(confirm("確定要?jiǎng)h除所選項(xiàng)目?")) {
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();
}
});
}
});
});
頁(yè)面元素:
<a href="#" id="del_model"><span>刪除用戶(hù)</span>
<th class="tal"><input type="checkbox" id="allChk"/>全選</th>
<td><input type="checkbox" name="subChk" value="${user.id}"/></td>
回調(diào)函數(shù),在請(qǐng)求完成后需要進(jìn)行的操作:此處是把選中的checkbox去掉(因?yàn)槭怯玫搅薴reemarker的list循環(huán),去掉是數(shù)據(jù)后checkbox序號(hào)變化,還有有相應(yīng)未知的checkbox被選中,需要去掉)。
success: function(result) {
$("[name = 'items']:checkbox").attr("checked", false);
window.location.reload();
}
java后臺(tái)代碼:
@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() {
// 判斷是否至少選擇一項(xiàng)
var checkedNum = $("input[name='subChk']:checked").length;
if(checkedNum == 0) {
alert("請(qǐng)選擇至少一項(xiàng)!");
return;
}
// 批量選擇
if(confirm("確定要?jiǎng)h除所選項(xiàng)目?")) {
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();
}
});
}
});
});
頁(yè)面元素:
<a href="#" id="del_model"><span>刪除用戶(hù)</span>
<th class="tal"><input type="checkbox" id="allChk"/>全選</th>
<td><input type="checkbox" name="subChk" value="${user.id}"/></td>
回調(diào)函數(shù),在請(qǐng)求完成后需要進(jìn)行的操作:此處是把選中的checkbox去掉(因?yàn)槭怯玫搅薴reemarker的list循環(huán),去掉是數(shù)據(jù)后checkbox序號(hào)變化,還有有相應(yīng)未知的checkbox被選中,需要去掉)。
復(fù)制代碼 代碼如下:
success: function(result) {
$("[name = 'items']:checkbox").attr("checked", false);
window.location.reload();
}
java后臺(tái)代碼:
復(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é)合寫(xiě)批量刪除功能
- PHP ajax+jQuery 實(shí)現(xiàn)批量刪除功能實(shí)例代碼小結(jié)
- JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫(xiě))
- jQuery通過(guò)ajax快速批量提交表單數(shù)據(jù)
- JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
- jQuery之a(chǎn)jax刪除詳解
- jQuery ajax中使用confirm,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例
- 如何從jQuery的ajax請(qǐng)求中刪除X-Requested-With
- jQuery+css3實(shí)現(xiàn)Ajax點(diǎn)擊后動(dòng)態(tài)刪除功能的方法
- 基于php(Thinkphp)+jquery 實(shí)現(xiàn)ajax多選反選不選刪除數(shù)據(jù)功能
- jQuery+ajax實(shí)現(xiàn)批量刪除功能完整示例
相關(guān)文章
jQuery使用ajax跨域請(qǐng)求獲取數(shù)據(jù)
跨域這個(gè)詞應(yīng)用非常頻繁,主要是因?yàn)榘踩拗?同源策略, 即JavaScript或Cookie只能訪(fǎng)問(wèn)同域下的內(nèi)容)。本文給大家介紹jQuery使用ajax跨域請(qǐng)求獲取數(shù)據(jù),需要的朋友可以參考下2015-10-10使用Ajax時(shí)處理用戶(hù)session失效問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了使用Ajax時(shí)處理用戶(hù)session失效問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Ajax實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián)(數(shù)據(jù)來(lái)自mysql數(shù)據(jù)庫(kù))
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián),數(shù)據(jù)來(lái)自mysql數(shù)據(jù)庫(kù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09AJAX和三層架構(gòu)實(shí)現(xiàn)分頁(yè)功能具體思路及代碼
本文涉及到AJAX和三層架構(gòu)方面的知識(shí),在學(xué)習(xí)分頁(yè)的同時(shí)也鞏固了一下它們的相關(guān)知識(shí),適合初學(xué)者的你2013-05-05使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā)
jQuery 是一個(gè)JavaScript 庫(kù),它有助于簡(jiǎn)化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 編程。與類(lèi)似的 JavaScript 庫(kù)不同,jQuery 具有獨(dú)特的基本原理,可以簡(jiǎn)潔地表示常見(jiàn)的復(fù)雜代碼。2009-11-11解決微信返回上一頁(yè),頁(yè)面中的AJAX的請(qǐng)求,對(duì)Get請(qǐng)求無(wú)效的問(wèn)題
這篇文章給大家介紹微信返回上一頁(yè),頁(yè)面中的AJAX的請(qǐng)求,對(duì)Get請(qǐng)求無(wú)效的問(wèn)題分析及解決方法,需要的朋友參考下2017-01-01