下拉框，input框，动态新增与删除

修改页面-----------------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<script src="<%=basePath%>static/js/bulletin.js"></script>
<div class="container">
   <div class="addDetail">
       <form class="form-horizontal" role="form" id="reportFormId" >
       <input type="hidden" value="${report.id}" name="id"/>
       <input type="hidden" id="q" value="${report.reportDays}" name="reportDays"/>
           
           <div class="row">
               <div class="col-md-12">
                   <input type="hidden" id="reportOrg" name="reportOrgVal" class="form-control"/>
                   <div class="form-group">
                       <label class="col-md-3 control-label no-padding-right" style="padding-top: 18px;">
                           <span class="ace-icon fa fa-asterisk red"></span>
                           申报单位
                       </label>
                           <div class="col-md-4">

                           <table class="addTable hhh">
                               <tr>
                                   <c:if test="${reportOrg!=null || reportOrg!=''}">
                                   <c:forEach items="${reportOrg}" var="org" varStatus="status">
                                   <tr>
                                       <c:if test="${status.count==1}">
                                       <tr>
                                           <td>
                                               <select class="form-control addTr" name="reportOrg" >
                                                       <c:forEach items="${orgList}" var="orgg">
                                                       <option <c:if test ="${org eq orgg.reportOrg}">selected</c:if> value="${org}"    class="reportOrg">${orgg.reportOrg}

</option>
                                                       </c:forEach>
                                               </select>
                                           </td>
                                           <td class="addTd addTd1">
                                               <span class="fa fa-plus bigger-140 addTr" onclick="addrow();"
                                                   style="padding-top: -5px"></span>
                                           </td>
                                       </tr>
                                       </c:if>

                                       <c:if test="${status.count>1}">
                                       <tr>
                                           <td>
                                           <select class="form-control addTr" name="reportOrg" >
                                               <c:forEach items="${orgList}" var="orgg">
                                                       <option <c:if test ="${org eq orgg.reportOrg}">selected</c:if> value="${org}"    class="reportOrg">${orgg.reportOrg}</option>
                                               </c:forEach>
                                           </select>

                                           </td>
                                           <td class="addTd addTd1">
                                           <span class='fa fa-times bigger-140' onclick="deleteTrRow(this);"
                                               style="padding-top: 10px"></span>
                                           </td>
                                       </tr>
                                       </c:if>

                                   </c:forEach>
                                   </c:if>
                               </tr>
                           </table>

                       </div>
                   </div>
               </div>
           </div>
           
           <div class="row">
               <div class="col-md-12">
                   <div class="form-group">
                       <label class="col-md-3 control-label no-padding-right">
                           <span class="ace-icon fa fa-asterisk red"></span>
                           团组名称
                       </label>
                       <div class="col-md-2">
                           <input type="text" name="reportTeam" value="${report.reportTeam}" class="form-control" />
                       </div>
                       <div class="col-md-2 control-label no-padding-left" style="text-align:left">国家（地区）执行</div>
                       <div class="col-md-2 no-padding-left" style="margin-left:-7.333%">
                           <input type="text" name="reportTask" value="${report.reportTask}" class="form-control" />
                       </div>
                       <div class="col-md-1 control-label no-padding-left" style="text-align:left">任务</div>
                   </div>
               </div>
           </div>
           
           <div class="row">
               <div class="col-md-12">
                   <div class="form-group">
                       <label class="col-md-3 control-label no-padding-right">
                           <span class="ace-icon fa fa-asterisk red"></span>
                           出访事由
                       </label>
                       <div class="col-md-2">
                           <select class="chosen-select form-control" id="form-field-select-3" name="reportReasons">
                               <option value="0">请选择</option>
                               <option <c:if test="${report.reportReasons=='考察'}">selected</c:if> value="考察">考察</option>
                               <option <c:if test="${report.reportReasons=='交流'}">selected</c:if> value="交流">交流</option>
                               <option <c:if test="${report.reportReasons=='培训'}">selected</c:if> value="培训">培训</option>
                               <option <c:if test="${report.reportReasons=='国际会议'}">selected</c:if> value="国际会议">国际会议</option>
                               <option <c:if test="${report.reportReasons=='参展'}">selected</c:if> value="参展">参展</option>
                               <option <c:if test="${report.reportReasons=='路演'}">selected</c:if> value="路演">路演</option>
                               <option <c:if test="${report.reportReasons=='其他'}">selected</c:if> value="其他">其他</option>
                           </select>
                       </div>
                       <div class="col-md-2 control-label no-padding-left" style="text-align:left">团长姓名</div>
                       <div class="col-md-2 no-padding-left" style="margin-left:-7.333%">
                           <input type="text" name="reportTeamer" value="${report.reportTeamer}" class="form-control" />
                       </div>
                   </div>
               </div>
           </div>
           
           <div class="row">
               <div class="col-md-12">
                   <div class="form-group">
                       <label class="col-md-3 control-label no-padding-right">
                           <span class="ace-icon fa fa-asterisk red"></span>
                           实际出访日期
                       </label>
                       <div class="col-md-2">
                           <div class="input-group">
                               <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd" name="reportRealdate" value="${report.reportRealdate}"/>
                               <span class="input-group-addon">
                                   <i class="fa fa-calendar bigger-110"></i>
                               </span>
                           </div>
                       </div>
                       <div class="col-md-2 control-label no-padding-left" style="text-align:left">团组形式</div>
                       <div class="col-md-4 no-padding-left" style="margin-left:-7.333%">
                           <div class="radio">
                               <label>
                                   <input name="reportTeamtype" type="radio" value="组团" class="toRadio" /> <span class="lbl"> 组团</span>
                               </label>
                               <label style="width: 20px"> </label>
                               <label>
                                   <input name="reportTeamtype" type="radio" value="参团" class="toRadio" /> <span class="lbl"> 参团</span>
                               </label>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           
           <div class="row">
           <input type="hidden" id="reportKey" name="reportKeyVal" class="form-control"/>
               <div class="col-md-12">
                   <div class="form-group">
                       <label class="col-md-3 control-label no-padding-right">
                           <span class="ace-icon fa fa-asterisk red"></span>
                           标签
                       </label>
                       <div class="col-md-4">
                           <table class="addTable ggg">
                               <c:if test="${reportKey!=null || reportKey!=''}">
           <c:forEach items="${reportKey}" var="mark" varStatus="status">

              <c:if test="${status.count==1}">
              <tr>
                  <td>
                                               <input type="text" name="reportKey" class="reportKey form-control" value="${mark}"/>
                                           </td>

                                           <td class="addTd addTd1">
                                               <span class="fa fa-plus bigger-140 addTr" onclick="addrowKey();" style="padding-top: -5px"></span>
                                           </td>
                                       </tr>
              </c:if>
                  <c:if test="${status.count>1}">
                  <tr>
                                           <td>
                                               <p class="addTr">
                                                   <input type="text" name="reportKey" class="reportKey form-control" value="${mark}"/>
                                               </p>
                                           </td>
                                           <td class="addTd addTd1">
                                               <span class='fa fa-times bigger-140' onclick="deleteTrRow(this);" style="padding-top: 10px"></span>
                                           </td>
                                       </tr>
                                       </c:if>
                                       </c:forEach>
       </c:if>
       <c:if test="${reportKey==null || reportKey==''}">
          <tr>
              <td>
                                           <input type="text" name="reportKey" class="reportKey form-control" value="${mark}"/>
                                       </td>

                                       <td class="addTd addTd1">
                                           <span class="fa fa-plus bigger-140 addTr" onclick="addrowKey();" style="padding-top: -5px"></span>
                                       </td>
                                   </tr>
       </c:if>
                           </table>
                       </div>
                   </div>
               </div>
           </div>
           <div class="row">
               <div class="form-group">
                   <label class="col-md-3 control-label no-padding-right">
                       <span class="ace-icon fa fa-asterisk red"></span>
                       内容
                   </label>
                   <div class="col-md-7">
                       <textarea name="reportContext" id="summernote">${report.reportContext}</textarea>
                       <p id="p" style="color:red;"></p>
                   </div>
               </div><span class="col-md-6 col-md-offset-3">团组总结报告详细内容（您可以从Word中直接粘贴（粘贴时请不要包含标题））</span>
           </div>
           <div class="row" style="margin-top: 20px">
               <div class="col-md-6 col-md-offset-3">
                   <button class="btn-sm saveBtn" type="button" onclick="report.updateReportAjax()">保存</button>
                   <button class="btn-sm saveBtn" type="button" id="published">上传</button>
                   <button class="btn-sm resetBtn" type="button" id="goback">返回</button>
               </div>
           </div>
       </form>
   </div>
</div>
<script type="text/javascript">
$(function() {
   //初始化富文本框
   recruit.bulletin.loadSummernote();

   // 实际出访日期
   if('${report.reportRealdate}' !== ""){
       $("[name=reportRealdate]").val($.dateFormat(new Date("${report.reportRealdate}"),'yyyy-MM-dd'));
   }
   //初始化选中状态团组性质
   if ('${report.reportTeamtype}' !== "") {
       $("input[type=radio][name=reportTeamtype][value=${report.reportTeamtype}]").attr("checked", 'checked');
   }

   //初始化日期选择器
   $('.date-picker').datepicker({
       autoclose: true,
       todayHighlight: true,
       language:'zh-CN'

   }).on('hide',function(e) { //解决选中了内容之后，bootstrapValidator不验证的问题
$('#reportFormId').data('bootstrapValidator')
.updateStatus('reportRealdate', 'NOT_VALIDATED',null)
.validateField('reportRealdate');
   })
   //show datepicker when clicking on the icon
   .next().on(ace.click_event, function(){
       $(this).prev().focus();
   })

   // 初始化form 验证
   $('#reportFormId').bootstrapValidator({
       message : 'This value is not valid',
       feedbackIcons : {
       valid : 'glyphicon glyphicon-ok',
       invalid : null,
       validating : 'glyphicon glyphicon-refresh'
       },
fields: {
   reportOrg : {
   validators : {
   notEmpty : {
   message : '不能为空'
   }
   }
   },
   reportTeam : {
   validators : {
   notEmpty : {
   message : '不能为空'
   }
   }
   },
   reportTask: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
reportReasons: {
   validators: {
       notEmpty: {
           message: '不能为空'
       }
   }
},
reportTeamer: {
   validators: {
       notEmpty: {
           message: '不能为空'
       }
   }
},
reportRealdate: {
   validators: {
       notEmpty: {
           message: '不能为空'
       }
   }
},
reportTeamtype: {
   validators: {
       notEmpty: {
           message: '不能为空'
       }
   }
},
reportKey: {
   validators: {
       notEmpty: {
           message: '不能为空'
       }
   }
},
}
});
   //返回事件
   $('#goback').click(function() {
               fst.util.editNav("展示页面")
               fst.util.loadPerPage('rightContainerID','report/toReportListView');
   });
   $('#published').click(function() {
               var data = $("#reportFormId").serialize();
               $.fstAjax({
                   url : fst.basePath + "report/published",
                   type : "POST",
                   data : data,
                   success : function(res) { // fstAjax 内的 success 经过封装，当后台没有报错时（res.code == '000000'），才走自定义的方法
                       BootstrapDialog.alert({
                           title : '提示',
                           message : '发布成功！',
                           buttonLabel: "确定",
                   HbtnOKClass : 'btn-danger',
                       });
                       fst.util.loadPerPage('rightContainerID','report/toReportListView');
                   }
               })
   });
   //提交
   report.updateReportAjax = function(){
       //单位拼接
       var options = $(".reportOrg:selected");
var orgVal = "";
if(options.length>0){
for (var i=0;i<options.length;i++){
orgVal += options[i].text;
orgVal += ","
}
orgVal =orgVal.substr(0,orgVal.length-1);
}
       $('#reportOrg').val(orgVal);

       //标签拼接
       var key = $(".reportKey");
   var keyVal = "";
   if(key.length>0){
   for (var i=0;i<key.length;i++){
   keyVal += key[i].value;
   keyVal += ","
   }
   keyVal =keyVal.substr(0,keyVal.length-1);
   }
       $('#reportKey').val(keyVal);
       var bootstrapValidator = $("#reportFormId").data('bootstrapValidator');//定义一个校验器
       bootstrapValidator.validate();//执行校验
       if(!$('#summernote').summernote("isEmpty")){
           $("#p").html("");
           if($('#summernote').summernote('code').length > 20000){
               $("#p").html("输入长度超过限制");
               return;
           }else{
               if(bootstrapValidator.isValid()){//判断校验结果-true为校验通过
                   var data = $("#reportFormId").serialize();
                   $.fstAjax({
                       url : fst.basePath + "report/updateReportAjax",
                       type : "POST",
                       data : data,
                       success : function(res) {
                           BootstrapDialog.alert({
                               title : '提示',
                               message : '保存成功！如果您的总结报告已经定稿，要将其上传到国际合作局，请点击“上传”按钮。',
                               buttonLabel: "确定",
                       HbtnOKClass : 'btn-danger',
                           });
                           fst.util.loadPerPage('rightContainerID','report/toReportListView');
                       }
                   })
               }
           }

       }else{
           $("#p").html("不能为空");
       }
   }
});
var index = 0;
function addrow() {
   var tables = $('.hhh');
   index++;
   console.log(index);
   var addtr = $(
           "<tr>"
           + "<td>"
           + "<select class='form-control addTr' name='reportOrg' >"
           + "<option >请选择</option>"
           + "<c:forEach items='${orgList}' var='orgg'>"
           + "<option name='reportOrg"+index+"' value='${org}' class='reportOrg'>${orgg.reportOrg}</option>"
           + "</c:forEach>"
           + "</select>"
           + "</td>"
           + "<td class='addTd addTd1'>"
           + "<span class='fa fa-times bigger-140' onclick=\"deleteTrRow(this);\""
           + "style='padding-top: 10px'></span>"
           + "</td>"
           + "</tr>"
           );
   addtr.appendTo(tables);
}
function addrowKey() {
   var tables = $('.ggg');
   index++;
   console.log(index);
   var addtr = $(
           "<tr>"
           + "<td>"
           + "<p class='addTr'>"
           + "<input type='text' name='reportKey"+index+"' class='reportKey form-control' value='${mark}'/>"
           + "</p>"
           + "</td>"
           + "<td class='addTd addTd1'>"
           + "<span class='fa fa-times bigger-140' onclick=\"deleteTrRow(this);\" style='padding-top: 10px'></span>"
           + "</td>"
           + "</tr>"
           );
   addtr.appendTo(tables);
}
function deleteTrRow(tr) {
   index--;
   $(tr).parent().parent().remove();
}
</script>

下拉框，input框，动态新增与删除

猜你喜欢