复选框批量处理前端实现

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

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

先从前端开始

代码语言：javascript复制

<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

下面来看表格内容的代码

代码语言：javascript复制

<tb:iterate id="column" indexId="index" name="exampleForm" property="listChunk.collection" 

代码语言：javascript复制

                                                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函数

代码语言：javascript复制

function function1(){
	if(function2('employeeIDs','请选择要操作的记录')){
		document.internalDismissionForm.action = "...";

		document.internalDismissionForm.submit() ;
	}
}

代码语言：javascript复制

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是一个很重要的模板

jquery

0 人点赞