复选框批量处理前端实现

最新推荐文章于 2023-03-27 18:14:34 发布

粲然canran

最新推荐文章于 2023-03-27 18:14:34 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端那些事

本文链接：https://blog.youkuaiyun.com/killer1989/article/details/46459457

前端那些事专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了批量处理页面的前端实现过程，包括如何使用复选框进行多选操作，如何通过迭代器获取数据，以及如何在表单中实现功能性的按钮和判断逻辑，确保操作的有效性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，对业务的批量处理是一个非常常见的方式，在具体的业务流畅，一般是以复选框多选进入批量处理的页面

下面就以一个具体实例作为讲解

先从前端开始

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="tbDataTable">
<thead>
    <tr>
	<td><input type="checkbox" name="chkall" onclick="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" onclick="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=...onclick="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是一个很重要的模板