DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 一覽畫面點擊復選框後獲取多個id值的方法
一覽畫面點擊復選框後獲取多個id值的方法
編輯:關於JavaScript     

在web開發中經常會遇到一覽畫面中每一條記錄前都帶一個復選框,點擊後選中該條記錄進行刪除、修改、查看等操作。

修改和查看都是獲取一條記錄的id值後傳遞到後台進行查詢獲取該記錄對象的各種屬性值,再顯示到畫面上。

我說的重點是選中多條記錄後進行批量刪除,如何獲取多條記錄的id值是問題的關鍵。首先是在jsp頁面中全選中復選框的方法。

代碼如下:

function checkEvent(name, allCheckId) { 
var allCk = document.getElementById(allCheckId); 
if (allCk.checked == true) 
checkAll(name); 
else 
checkAllNo(name); 
} 
//全選 
function checkAll(name) { 
var names = document.getElementsByName(name); 
var len = names.length; 
if (len > 0) { 
var i = 0; 
for (i = 0; i < len; i++) 
if(!names[i].disabled){ 
names[i].checked = true; 
} 
} 
} 
//全不選 
function checkAllNo(name) { 
var names = document.getElementsByName(name); 
var len = names.length; 
if (len > 0) { 
var i = 0; 
for (i = 0; i < len; i++) 
names[i].checked = false; 
} 
} 

調用該方法的jsp代碼:

<input name="checkAll" id ="checkAll" onclick="checkEvent('chooseFaqId','checkAll')" type="checkbox"/></td> 

其中,chooseFaqId是復選框的name屬性值,checkAll是表頭復選框的name屬性值。

前台具體執行批處理的js代碼,需要對選中的記錄id值用逗號分隔,刪除批處理方法代碼如下:

function batchDeletechFaq(idStr){ 
var ids="'"; 
$("input[name='chooseFaqId']").each(function(){ 
if(this.checked){ 
ids+=this.value+"','" 
} 
}); 
ids+="'"; 
ids=ids.replace(/,''/g,''); 
if(ids=="''"){ 
jqDialog.alert("<s:text name='faqManage.pleaseSelectFaq'/>"); 
return; 
} 
$.ajax({ 
type:"POST", 
url:"admin/faqManageAction!batchDeleteFaq.action", 
data: {chooseFaqId: ids}, 
dataType: "text", 
success:function(html){ 
if(html=="success"){ 
jqDialog.alert("<s:text name='faqManage.OperationWasSuccessful'/>",function(){ window.location.href = window.location.href.replace(/#/g,''); 
}); 
} else { 
jqDialog.alert("<s:text name='faqManage.OperationFailedPleaseTryLater'/>"); 
} 
} 
}); 
}); 
} 

後台獲取前台傳回的一組id值

final String ids = this.getRequest().getParameter("chooseFaqId"); 

原先獲取選中的一組id采用的是以下方式:

final String ids = this.getRequest().getParameterValues("chooseFaqId"); 

這樣可以直接得到一個字符串數組,不需要進行任何編輯操作。後來由於何種原因改成現在的方式有點記不清了。

最後是後台BO層執行刪除的代碼:

/** 
* 根據ID批量刪除FAQ問題 
* @param faqAnswer 
* @return 
*/ 
public void batchDeleteFaq(final String ids){ 
final String hql = "delete from FAQAnswer o where o.id in ("+ids+")"; 
faqManagerDao.execute(hql); 
}

總結,我采用的是ajax提交方式,點擊批量刪除按鈕後,首先判斷用戶是否至少選中了記錄,否則彈出提示消息。選中後點擊刪除按鈕執行後台方法。如果執行操作失敗彈出操作失敗消息框。

以上所述是小編給大家介紹的一覽畫面點擊復選框後獲取多個id值的方法,希望對大家有所幫助,如果大家想了解更多資訊敬請關注網站!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved