一览画面点击复选框后获取多个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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jQuery基础知识小结
Dec 22 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python+opencv实现车道线检测
2021/02/19 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
行政副总岗位职责
2014/02/23 职场文书
员工加薪申请报告
2015/05/15 职场文书
战马观后感
2015/06/08 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL