A1:笑得海潮 B3:冒泡的崔 D2:Cornell University,Computer Vision Group H2:冰河的博客 G3:丕子博客 K1:MLA CHINA K4:斯坦福视觉实验室 L4:MIT 机器学习实验室
现在的位置: 首页技术>正文
cat_ico23 category
SSH中JQuery+Ajax实现批量选择和删除
发表于549 天前 技术 评论数 21 ⁄ 被围观 2,141 次+

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

这样,ajax返回msg==1,就可以一些特定操作了。

大体就是这个样子,十分简单方便,赞叹JQuery真是好东西。

SSH中JQuery+Ajax实现批量选择和删除:目前有21 条留言

  1. TTkea : 2010年08月08日10:49 上午 回复

    额,高科技搞不清楚了~

    • 丕子 : 2010年08月08日11:32 上午 回复

      嗯 不是那么难的但是很好用

  2. QiQiBoY : 2010年08月08日11:34 上午 回复

    jQuery个人用用还行,公司商业之类的应用切不可依赖它。。

    • 流年 : 2010年08月08日1:13 下午 回复

      我也觉得是

      • 丕子 : 2010年08月08日2:32 下午 回复

        这个是为什么呢? 只是一个js写好的库而已 而且还开源

    • 丕子 : 2010年08月08日2:32 下午 回复

      请详细指教一下

  3. 七七 : 2010年08月08日2:06 下午 回复

    简单方便,不妨试试

  4. 丕子 : 2010年08月08日2:32 下午 回复

    @QiQiBoY
    请详细指教一下

  5. QiQiBoY : 2010年08月08日2:44 下午 回复

    @丕子
    因为它是别人开发的,除非你已经很清楚的阅读了它的源码,很清楚了它的各个结构部分,知道了它的运作原理(达到这种程度,这时的绝大部分人大都会自己开发框架了,也不会使用jQuery了)。。否则jQuery的一些方法是效率非常低的,盲目依赖它,只会让你的项目越做越烂。。

    • 丕子 : 2010年08月08日2:59 下午 回复

      哦 我以为有什么官方的数据之类的 呵呵

  6. Mucid : 2010年08月08日3:51 下午 回复

    为啥要给value取这马抽象的名字啊。。${mail.id}

    • 丕子 : 2010年08月08日5:15 下午 回复

      struts中的取值的一种方式 叫啥名忘了 mail是对象 id是属性 方便吧 模型层的理解

      • 冰剑 : 2010年08月09日1:38 上午 回复

        数据绑定,可以自动查找FormBean中的值。。
        很喜欢struts标签库,太方便了。

  7. 减肥药排行榜 : 2010年08月08日7:15 下午 回复

    学习了。。未来jQuery是个大方向

  8. huangjun : 2010年08月08日9:28 下午 回复

    简单?
    这句话太让我伤心了,唉~

  9. 冰剑 : 2010年08月09日1:36 上午 回复

    公司用不行??不少大小公司都在使用Jquery,就算是别人开发的怎么样?既然开源了,就能看到里面的东西,没必要一定完全读懂代码才去使用。不少公司的网站程序都是开源的,难道你认为他们全部都读完、读懂了源代码?

    jQuery那么受欢迎不是运气,而是因为它确确实实是个好的JS框架。

    • 丕子 : 2010年08月09日8:27 上午 回复

      嗯 确实是 我查看了一下 就连微软的也在用

  10. 秦大少 : 2010年08月09日10:06 上午 回复

    虽然大家都说JQuery简单易用,但我还是没搞懂要怎么用起来。

  11. 智力开发产品 : 2010年08月09日10:38 上午 回复

    好好学习,天天向上,哈哈~~

  12. 华帝燃气灶维修 : 2010年08月09日3:27 下午 回复

    确实不太懂

  13. zwwooooo : 2010年08月09日4:47 下午 回复

    SSH中?这就不懂了

给我留言


/ 快捷键:Ctrl+Enter

无觅相关文章插件,快速提升流量

不想听你唠叨×