jquery ajax實現(xiàn)批量刪除具體思路及代碼
更新時間:2013年04月07日 17:24:46 作者:
回調(diào)函數(shù),在請求完成后需要進行的操作:此處是把選中的checkbox去掉,接下來為大家詳細介紹下,感興趣的朋友可以參考下哈,希望對你有所幫助
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ù),在請求完成后需要進行的操作:此處是把選中的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ù),在請求完成后需要進行的操作:此處是把選中的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,確認是否刪除的簡單實例
- 如何從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)文章
Ajax實現(xiàn)省市區(qū)三級級聯(lián)(數(shù)據(jù)來自mysql數(shù)據(jù)庫)
這篇文章主要為大家詳細介紹了Ajax實現(xiàn)省市區(qū)三級級聯(lián),數(shù)據(jù)來自mysql數(shù)據(jù)庫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09AJAX和三層架構(gòu)實現(xiàn)分頁功能具體思路及代碼
本文涉及到AJAX和三層架構(gòu)方面的知識,在學(xué)習(xí)分頁的同時也鞏固了一下它們的相關(guān)知識,適合初學(xué)者的你2013-05-05解決微信返回上一頁,頁面中的AJAX的請求,對Get請求無效的問題
這篇文章給大家介紹微信返回上一頁,頁面中的AJAX的請求,對Get請求無效的問題分析及解決方法,需要的朋友參考下2017-01-01