一览画面点击复选框后获取多个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 相关控件的事件操作分解
Aug 03 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
初步剖析C语言编程中的结构体
2016/01/16 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
python装饰器使用实例详解
2019/12/14 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
公务员综合考察材料
2014/02/01 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
授权委托书
2015/01/28 职场文书
以权谋私检举信范文
2015/03/02 职场文书