SSH中JQuery+Ajax实现批量选择和删除
通常见到的一个数据列表，前面有很多复选框，咱们可以选择多个，或者全选，进行全部删除，例如咱们经常用的邮件列表。这两天做实验室的项目，也用到了一些，以前用的纯的js，近年来jquery非常热，所以将一些老技术替换了一下，下面就举例子吧。项目的开发框架是J2EE的Struts+Hibernate+Spring。
首先看看视图层的列表数据，咱们要对复选框进行初始化。在迭代器中，每一条数据都有一个复选框。
< input value = " ${mail.id} " id = " ${mail.id} " name = " MailCB " type = " checkbox " / >
然后数据迭代完之后，要跟随着全部选择和删除所选的按钮：里面的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();
}