SSH中JQuery+Ajax實現批量選擇和刪除

作者: 丕子來源: 丕子博客發布時間: 2010-09-05 22:17 閱讀: 5762 次推薦: 1 原文鏈接 [收藏]

　　通常見到的一個數據列表，前面有很多復選框，咱們可以選擇多個，或者全選，進行全部刪除，例如咱們經常用的郵件列表。這兩天做實驗室的項目，也用到了一些，以前用的純的js，近年來jquery非常熱，所以將一些老技術替換了一下，下面就舉例子吧。項目的開發框架是J2EE的Struts+Hibernate+Spring。
　　首先看看視圖層的列表數據，咱們要對復選框進行初始化。在迭代器中，每一條數據都有一個復選框。

　　然后數據迭代完之后，要跟隨著全部選擇和刪除所選的按鈕：里面的id是登錄用戶的id

<div align="center">
<input id="sbutton" type="button" value="全部選擇" onclick="SelectAllRows()" />
<input id="dbutton" type="button" onclick="delBatch(${id},'<%=basePath%>')" value="刪除所選" />
</div>

　　然后引入你的js文件，然后在js文件里面，開始寫函數：

//全選、不選
function SelectAllRows() {
var sbvalue=$("#sbutton")[0].value;

var check_obj = $("input[name='MailCB']");
for (var i = 0; i < check_obj.length; i++) {
if(sbvalue!=null&&sbvalue=='全部選擇')
{
check_obj.get(i).checked = true;
$("#sbutton")[0].value='取消全選';
}
else if(sbvalue!=null&&sbvalue=='取消全選')
{
check_obj.get(i).checked = false;
$("#sbutton")[0].value='全部選擇';
}

}
}

//判斷是否至少選擇了一項
function delBatch(userID, domain) {
var checked_num = $("input[name='MailCB']:checked").length;
if (checked_num == 0) {
alert("至少選擇一項");
return;
}
//多項選擇后的操作代碼

var idList = "";

if(confirm( "確定要批量刪除?" ))
{

var check_obj = $("input[name='MailCB']");
for (var i = 0; i < check_obj.length; i++) {
if(check_obj.get(i).checked == true)
{
idList+=check_obj.get(i).value+",";
}
}

idList = idList.substring(0, idList.length - 1);

$.ajax( {
type : "GET",
url : domain + "adminDelete.do",
data : "userID=" + userID + "&prID=" + idList,

beforeSend : function(XMLHttpRequest) {

$("#dbutton")[0].value='正在刪除...';
},
success : function(msg) {

furl=domain+"adminFind.do?id="+userID;
window.location.href=furl;

},
complete : function(XMLHttpRequest, textStatus) {

},
error : function() {
}
});
}
else
{
return;
}
}

　　在delBatch中的刪除用到了ajax技術，十分的方便，可以在提交之前的beforeSend : function()中進行設定，例如弄一些比較常見的動態的循環等待圖片等等。而且當返回成功success : function時候你也可以自己處理，其中更加細節的部分，可以從action中獲得參數，msg就是action中返回的參數，但是在action中怎么處理呢，可以這么做：

PrintWriter out;
try {
out = response.getWriter();

if(你的處理成功){

out.print(1);
return null;
}

}catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}