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


Posted in Javascript onMay 30, 2016

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

Javascript 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
DOM 高级编程
May 06 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 #Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 #Javascript
限制复选框最多选择项的实现代码
May 30 #Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 #Javascript
JS组件Bootstrap Table使用实例分享
May 30 #Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
You might like
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jQuery技巧总结
2011/01/01 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery基础知识小结
2014/12/22 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python使用代理ip访问网站的实例
2018/05/07 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
新年联欢会主持词
2014/03/27 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL