1.如上图显示,点击最上边的会把所有的多选框选中,即全选,
<INPUT onClick="checkAll(this.checked)" type="checkbox" />
触发这个事件的js为:
function checkAll(checked){ var objs=document.getElementsByName("ids"); if(objs!=null && objs.length>0){ for(var i=0;i<objs.length;i++){ objs[i].checked=checked; } } }
每一行最左边的多选框对应的是下面这个:
<INPUT name="ids" type="checkbox" value="<s:property value="adId"/>"/>
2.若是做批量删除,则可以点击删除按钮,触发del()事件
function del(){ if(isCheck()){ if(confirm("确定删除操作么?此操作无法回退!")){ //点击确定发出ajax请求,这是最简单的ajax请求方式 $.post("advert_del.do","ids="+getCheckValue(),delComplete,"text"); } }else{ alert("请选择要操作的记录!"); } } function delComplete(data){ if(data!=""){ var datas=data.split(";"); if(datas!=null && datas.length>0){ for(var i=0;i<datas.length;i++){ if(datas[i]!="" && document.getElementById("tr"+datas[i])!=null){ document.getElementById("tr"+datas[i]).parentNode.removeChild(document.getElementById("tr"+datas[i])); } } } } }
3.首先判断是否选中,调用的是ischeck()方法:
//判断是否有多选框被选中 function isCheck(){ var objs=document.getElementsByName("ids"); if(objs!=null && objs.length>0){ for(var i=0;i<objs.length;i++){ if(objs[i].checked){ if(objs[i].checked){ return true; } } } } return false; } //获取多选框选中的值ids的样式为1;2;3;4 function getCheckValue(){ var checkValue=""; var objs=document.getElementsByName("ids"); if(objs!=null && objs.length>0){ for(var i=0;i<objs.length;i++){ if(objs[i].checked){ checkValue+=objs[i].value+";"; } } } return checkValue; } //只需要一个多选框被选中 function isCheckOne(){ var value=getCheckValue(); if(value!=null && value!=""){ var valueArr=value.split(";"); if(valueArr!=null && valueArr.length==2){ return true; }else{ return false; } } return false; } //获取仅选中一个多选框的值 function getCheckOneValue(){ var objs=document.getElementsByName("ids"); if(objs!=null && objs.length>0){ for(var i=0;i<objs.length;i++){ if(objs[i].checked){ return objs[i].value; } } } return ""; } //将所有选中的值用;分割成数组的形式 function getCheckValueArr(){ return getCheckValue().split(";"); }
删除的后台处理代码
/** * 删除 * @return */ public String del(){ if (ids!=null && ids.trim().length()>0) { StringBuilder sb=new StringBuilder(); String[] idArr=ids.split(";"); if (idArr!=null && idArr.length>0) { for (int i = 0; i < idArr.length; i++) { if (idArr[i].trim().length()>0) { try { depatureCityCitiesAr=depatureCityCitiesArService.findById(Integer.parseInt(idArr[i])); if (depatureCityCitiesAr!=null) { depatureCityCitiesArService.delCity(depatureCityCitiesAr.getDepcCityarId()); sb.append(idArr[i]+";"); } } catch (Exception e) { DBProException(e); } } } } write(sb.toString(), "UTF-8"); } return null; }
相关推荐
GridView的每一行通常包含多个字段,为了实现批量操作,我们可以在每行数据前添加一个复选框。这可以通过在GridView的模板字段(TemplateField)中定义一个ItemTemplate来实现。在ASP.NET的ASPX代码中,可以看到...
在开发过程中,经常会遇到对查询列表中的记录进行批量操作的情况,例如批量删除、批量编辑等。实现这种批量选择的方法往往是使用 JavaScript,通过在每条记录前面加一个复选框,然后在列表下方放置一个“全选/全不选...
- 将多个相关的数据分组,并与复选框进行关联。这有助于更好地管理和控制批量数据的传送。 **5. 按钮脚本** - 通常情况下,我们会为一个按钮绑定脚本,当用户点击该按钮时,就会执行相应的脚本逻辑。 **6. 脚本...
本文将详细解析如何在ADF中实现多选框功能和分页效果,特别是针对Table组件的运用。 首先,让我们了解什么是ADF。Oracle ADF 是一个Java EE框架,它提供了一整套工具和服务,用于构建企业级Web应用。ADF包含模型、...
### JS全选反选父项子项联动多选框知识点详解 #### 一、知识点概述 在前端开发中,我们经常遇到需要实现全选/反选功能的需求,尤其是在表格或列表选择场景中。本文将详细介绍一种实现“父项选中时,子项随父项选中...
本教程将详细讲解如何利用JSP和复选框实现批量删除的功能。 首先,我们需要理解JSP的基本结构和工作原理。JSP是Java的一种视图技术,它允许我们在HTML页面中嵌入Java代码,从而动态生成网页内容。在批量删除的场景...
在这种结构中,多选框的引入使得用户能够批量选择不同级别的项目,提高了操作效率。例如,在文件管理器中,用户可以一次性选定一个文件夹及其所有子文件夹中的文件,或者在组织架构中选择多个部门及其员工。 在实现...
7. **批量操作(Bulk Operations)**: 当用户选中多行时,需要跟踪所有选中的行。可以使用数组存储选中行的索引,或者创建一个对象映射行ID到复选框的状态。 8. **响应式设计(Responsive Design)**: 考虑到...
在本示例中,我们将聚焦于jQuery实现复选框的全选与反选功能,这对于创建数据筛选或批量操作的用户界面非常有用。下面将详细介绍这个功能的实现方式。 首先,我们需要在HTML页面中设置一组复选框,通常我们会为这些...
3. 操作多选框状态: 可以通过`setChecked()`方法来改变多选框的状态,例如: ```java checkboxExample.setChecked(true); // 设置为选中 checkboxExample.setChecked(false); // 设置为未选中 ``` 4. 多选框...
在这个实例中,我们将关注如何实现复选框批量操作。 首先,让我们解析给定的代码片段。在视图部分,`CGridView` 是Yii的一个内置组件,用于展示数据网格。在这里,我们创建了一个`CGridView`实例,`id`设为`user-...
综上所述,实现RecyclerView的批量操作涉及Adapter的扩展、用户交互设计、数据同步以及性能优化等多个方面。通过精心设计和实现,可以为用户提供流畅且便捷的批量操作体验。在实际项目中,可以根据需求进一步定制和...
7. **复选框组**:在网格布局中,可能会有多个复选框组成一个组,实现联动或互斥的效果,例如全选/全不选、多选框之间的影响等。 8. **自定义图标**:替换默认的勾选图标,使用自定义的SVG图标或者其他图形,使得复...
批量操作的概念源于自动化和效率优化的思想,它允许用户一次性处理多个对象或数据条目,而无需逐个进行交互。这种功能在数据库管理、文件操作、数据导入导出等场景中尤为常见。 批量操作控件的设计通常包括以下关键...
在IT领域,尤其是在前端开发中,构建用户界面时经常需要处理多级目录树结构,并且在这样的结构中加入复选框功能,以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...
### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...
6. **优化用户体验**:为了提高可用性,可以添加批量移动功能,比如选择多个复选框后一次性移动。还可以添加防止重复选择的机制,避免用户误操作。 7. **代码组织**:为了保持代码整洁,可以将复选框移动逻辑封装成...
本篇文章将详细讲解如何在Bootstrap Table中实现多选框删除功能。 首先,我们需要在HTML中创建一个Bootstrap Table,并为其设置ID,例如`#table`。表格中通常包含多个带有复选框的行,用户可以通过勾选这些复选框来...
当用户在前端触发批量删除操作(可能是点击一个“删除”按钮),JavaScript会收集所有已选中的复选框对应的ID或值,然后通过Ajax异步请求把这些数据发送到服务器。 在ASP端,接收到这些数据后,服务器会解析请求,...