页面新增加项，删除项的实现

效果预览

部分jsp代码：

<form id="protectionApplyItem" name="" method="post" action="permodular/companySealApply/apply.do"onsubmit="return checkNumbers()"><label for="processDefinitionKey" style="margin-right:30px;"><span>选择流程</span><select id="processDefinitionKey" name="processDefinitionKey"><c:forEach items="${processes }" var="process"><option value="${process.key }" <c:if test='${process.key == "zzsqlc" }'>selected="selected"</c:if>>${process.name }</option></c:forEach></select></label><input class="myButton" type="button" id="addApplyItem" value="添加项"><input class="myButton" type="button" id="del" value="删除项"><hr><div id="addItemList"><input type="checkbox" name="check"/><div class="addItem"><label for="type"><span>证章名</span><select class="qulificationId" name="qulificationId" id="qulificationId0"></select><!-- <select name="selectSecond" id="selectSecond0"></select> -->      </label><br/>      <!-- <label for="number0">        <span>数量</span>        <input id="number0" name="number" type="text">      </label> --></div>        <hr/>    </div>    <label for="applyReason">        <span>申请原因</span>     <input id="applyReason" name="applyReason">    </label>    <br/>    <label for="remarks">        <span>备注</span>     <textarea rows="4" cols="50" id="remarks" name="remarks" style="vertical-align:top;"></textarea>    </label>    <br/>  <!--   <button class="mySave" type="button" id="addApplyItem">添加</button> -->    <input class="myButton" type="submit" id="submit" value="申请"/>   <!--  <button class="mySave" type="button" id="del">删除</button> --></form>

js实现增加项，删除项

//新加区域的内容var row='<input type="checkbox" name="check"/>'+        '<div class="addItem">'+            '<label for="type">'+                '<span>资质名</span>'+                '<select class="qulificationId" name="qulificationId"></select>'+        '</div>'+        '<hr>';//默认区域只有1个，此参数用于区域的id后缀var count = 1;//初始化数据，下拉选项，在ajax中对此数据进行更新var initQualificationData = "";//创建新的条目，并为新的条目设立唯一的idfunction create(count){    $("#addItemList").append(row);    var newAddItem = $("#addItemList").find(".addItem").last();    newAddItem.find('select').eq(0).attr("id","qulificationId"+count);    newAddItem.find('select').eq(0).append(initQualificationData);}//初始第一条目以及新条目出来后，数据的初始化function initData(){    var qualificationName = $(".addItem").find("select").eq(0);    qualificationName.find("option").remove();    qualificationName.append(initQualificationData);}$(function(){    //初始化数据    $.ajax({        type : "POST",        url : "admmodular/companySeal/noFilterGetCompanySealList.do",        success : function(result) {            //循环遍历得到的模块名称，动态添加到html中            var results = eval("("+result+ ")");            //类型下拉列表            for (var i = 0; i < results.list.length; i++) {                initQualificationData +='<option name="qulificationId" value="'+results.list[i].id+'" >'+results.list[i].sealName+'</option>'            }            initData();        }    })    //增加新的条目    $('#addApplyItem').click(function(){        create(count);        count=count+1;    })    //删除多余的条目，这里使用了layer插件    $('#del').click(function(){        var length=$('input:checked').length;        if(length == 0){            layer.alert("请选择需要删除的内容");            return;        }else{            layer.confirm('是否确认删除？', {                  btn: ['确认','取消'] //按钮                }, function(){                    for(var i=0;i<length;i++){                        $('input:checked').eq(0).next('.addItem').remove();                        $('input:checked').eq(0).next('hr').remove();                        $('input:checked').eq(0).remove();                    }                    layer.closeAll();                }, function(){                    $('input:checked').attr("checked",false);            });        }    }); })

后台对数据的处理：

/** * 申请操作 * @param processDefinitionKey * @param qulificationId * @param applyReason * @param remarks * @param request * @param response * @return */@RequestMapping("apply")public String apply(String processDefinitionKey,int[] qulificationId,String applyReason,        String remarks,HttpServletRequest request,HttpServletResponse response){    User user = (User) request.getSession().getAttribute(Constants.LOGIN_USER);    CompanyQualificationApply companyQualificationApply = new CompanyQualificationApply();    companyQualificationApply.setApplyDate(new Date());    companyQualificationApply.setApplyReason(applyReason);    companyQualificationApply.setRemarks(remarks);    companyQualificationApply.setState(1);//行政审批中    companyQualificationApply.setUserId(user.getId());    List<CompanyQualificationApplyItem> CompanyQualificationApplyItems = new ArrayList<CompanyQualificationApplyItem>();    try {        for (int i = 0; i < qulificationId.length; i++) {            CompanyQualificationApplyItem personalLabourProtectionApplyItem = new CompanyQualificationApplyItem();            personalLabourProtectionApplyItem.setQualificationId(qulificationId[i]);            //申请单号这里无法设置，在service中补上            CompanyQualificationApplyItems.add(personalLabourProtectionApplyItem);        }        companyQualificationApplyService.submit(companyQualificationApply, CompanyQualificationApplyItems, request,                    runtimeService, taskService, processDefinitionKey);    } catch (Exception e) {        ExceptionHandler.handle(logger, e, "劳保申请失败！");    }    return "redirect:applyHistory.do?page=1&size=10";   }