一览画面点击复选框后获取多个id值的方法

 更新时间:2016年05月30日 09:58:00   作者:山中小溪  
这篇文章主要介绍了在一览画面点击复选框后获取多个id值的方法,前台采用js技术后台采用java技术实现的,逻辑清晰,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧

在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值的方法,希望对大家有所帮助,如果大家想了解更多资讯敬请关注脚本之家网站!

相关文章

  • 通过layer实现可输入的模态框的例子

    通过layer实现可输入的模态框的例子

    今天小编就为大家分享一篇通过layer实现可输入的模态框的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • LayerClose弹窗关闭刷新方法

    LayerClose弹窗关闭刷新方法

    今天小编就为大家分享一篇LayerClose弹窗关闭刷新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • ES6入门教程之Array.from()方法

    ES6入门教程之Array.from()方法

    这篇文章主要给大家介绍了关于ES6入门教程之Array.from()方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • js如何对元素可视区域进行判定

    js如何对元素可视区域进行判定

    在前端开发中,有时候我们需要判断一个元素是否在可视区域内,本文主要介绍了js如何对元素可视区域进行判定,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 小程序如何在不同设备上自适应生成海报的实现方法

    小程序如何在不同设备上自适应生成海报的实现方法

    这篇文章主要介绍了小程序如何在不同设备上自适应生成海报的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js实现前端图片上传即时预览功能

    js实现前端图片上传即时预览功能

    这篇文章主要为大家详细介绍了js实现前端图片即时预览功能,本地预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript自动生成包含数字与字符的随机字符串

    javascript自动生成包含数字与字符的随机字符串

    这篇文章主要介绍了javascript自动生成包含数字与字符的随机字符串,涉及Math.random()和Math.floor()两个函数的使用技巧,需要的朋友可以参考下
    2015-02-02
  • 微信小程序选择器组件picker简单入门

    微信小程序选择器组件picker简单入门

    微信小程序picker表单选择器的使用,根据官方介绍的有点不清楚,下面这篇文章主要给大家介绍了关于微信小程序选择器组件picker的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • 详解小程序云开发攻略(解决最棘手的问题)

    详解小程序云开发攻略(解决最棘手的问题)

    这篇文章主要介绍了详解小程序云开发攻略(解决最棘手的问题),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JavaScript开发时的五个注意事项

    JavaScript开发时的五个注意事项

    JavaScript开发时的五个注意事项讲述了表单事件、链接、循环优化、匿名函数、字符串连接等优化技巧,需要的朋友可以参考一下
    2007-12-12

最新评论