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

效果预览
页面新增加项,删除项的实现_第1张图片

页面新增加项,删除项的实现_第2张图片

页面新增加项,删除项的实现_第3张图片

部分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>

      label><br/>
      
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/>
  
    <input class="myButton" type="submit" id="submit" value="申请"/>
   
form>

js实现增加项,删除项

//新加区域的内容
var row=''+
        '
'+ '+ '资质名'+ ''+ '
'
+ '
'
; //默认区域只有1个,此参数用于区域的id后缀 var count = 1; //初始化数据,下拉选项,在ajax中对此数据进行更新 var initQualificationData = ""; //创建新的条目,并为新的条目设立唯一的id function 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 +='+results.list[i].sealName+'' } 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'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 CompanyQualificationApplyItems = new ArrayList();
    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";   
}

你可能感兴趣的