复选框批量处理前端实现
2023-06-13 09:13:26 时间
在项目中,对业务的批量处理是一个非常常见的方式,在具体的业务流畅,一般是以复选框多选进入批量处理的页面
下面就以一个具体实例作为讲解
先从前端开始
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="tbDataTable">
<thead>
<tr>
<td><input type="checkbox" name="chkall" οnclick="checkAll(this,'employeeIDs');" /></td>
<tb>...</tb>
</tr>
这是列表的标题,一般这里的复选框主要是用来全选或者全不选
具体功能实现参考http://heisetoufa.iteye.com/blog/227350
下面来看表格内容的代码
<tb:iterate id="column" indexId="index" name="exampleForm" property="listChunk.collection"
type="...common.vo.EmployeeDetailInfoVO">
<tr>
<td width="2%"><html:multibox property="employeeIDs" οnclick="chkSingle(this,'employeeIDs');">
<bean:write name="column" property="oid" /></html:multibox></td>
<tb/>...<td>
<pre name="code" class="html"> </tr>
...
上面的代码运用了迭代器,拿到的Form是exampleForm,具体的参数listChunk,由于结构的特殊性,需要listChunk.collection来取值,最后面是类型,如果是自定义,则最好添加,下面到了复选框,其中<bean:write name="column property="oid" />就是复选框里面的值,它并显示出来,但会在提交的时候放到Form里面用于action的接收
这里还对onclick进行了指定,一般来讲可以是变色,加粗等,来区分未选择的,网上有很多现成的模板,这里不进行具体讲解
这时,对应的按钮就可以提交了~~~~
例如<a href="XXX.do?state=...οnclick="function1(); return false;""/>
这里的function1()主要用于判断是否有选择的复选框,如果没有则给出提示
具体实例如下,这里用function1调用function2函数
function function1(){
if(function2('employeeIDs','请选择要操作的记录')){
document.internalDismissionForm.action = "...";
document.internalDismissionForm.submit() ;
}
}
function function2(chkName, alertMsg, confirmMsg){
var chkResult = false;
var inputs = document.getElementsByTagName('INPUT');
for (i = 0;i<inputs.length;i++){
if (inputs[i].name == chkName){
if (inputs[i].checked){
if(!confirmMsg){
chkResult = true;
return chkResult;
}
return window.confirm(confirmMsg);
}
}
}
window.alert(alertMsg);
return chkResult;
}
function2是一个很重要的模板
相关文章
- 自动化办公-批量doc文件转docx文件python2021.10.8
- ExecelVBA批量打印文件夹有文件并设置打印为一页数
- 怎么批量删除WordPress自定义栏目?
- 前端展示中实现批量标签动态生成
- 客服系统即时通讯IM开发(七)生成唯一身份UUID批量更新旧数据【唯一客服】网站在线客服系统
- Linkedin领英批量点赞,提升曝光率和活跃度【领英干货】
- Posthelper标签图片批量插入Typecho插件
- python3 写的一个通过ftp远程批量处理的工具__界面处理代码详解编程语言
- 快速完成MySQL批量数据导入(mysql批量导入)
- 【Linux下高效批量重命名方法】(批量重命名linux)
- MySQL:批量修改字段值的一种新方法(mysql批量修改字段值)
- js批量设置样式的三种方法不推荐使用with
- Java批量修改文件名的实例代码
- codeigniter使用技巧批量插入数据实例方法分享
- java批量采集豌豆荚网站Android应用图标和包名