您的位置:知识库 » 软件工程

SSH中JQuery+Ajax实现批量选择和删除

作者: 丕子  来源: 丕子博客  发布时间: 2010-09-05 22:17  阅读: 5538 次  推荐: 1   原文链接   [收藏]  

  通常见到的一个数据列表,前面有很多复选框,咱们可以选择多个,或者全选,进行全部删除,例如咱们经常用的邮件列表。这两天做实验室的项目,也用到了一些,以前用的纯的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();
}
1
0

软件工程热门文章

    软件工程最新文章

      最新新闻

        热门新闻