layer 팝 업 창 과 layui 폼 을 사용 하여 추가 기능 을 실현 합 니 다.

1.수요:layer 를 사용 하여 팝 업 창 에 추가,성공 후 알림 및 페이지 새로 고침(부모 페이지,list 페이지)
2.실현
  a*페이지 효과 도  

페이지 코드
  --폼 에서 구축

<div id="add-main" style="display: none;">
       <form class="layui-form" id="add-form" action="">
         <div class="layui-form-item center" >
          <label class="layui-form-label" style="width: 100px" >    </label>
          <div class="layui-input-block">
           <input type="text" name="name" required value="" style="width: 240px" lay-verify="required" placeholder="       " autocomplete="off" class="layui-input">
          </div>
         </div>
         <div class="layui-form-item">
          <label class="layui-form-label" style="width: 100px">    </label>
          <div class="layui-input-block">
           <input type="text" name="type" required style="width: 240px" lay-verify="required" placeholder="       " autocomplete="off" class="layui-input">
          </div>
         </div>
         <div class="layui-form-item">
          <label class="layui-form-label" style="width: 100px">   &emsp;</label>
          <div class="layui-input-block">
           <input type="text" name="value" required style="width: 240px" lay-verify="required" placeholder="      " autocomplete="off" class="layui-input">
           <!-- <input type="hidden" name="id" style="width: 240px" autocomplete="off" class="layui-input"> -->
          </div>
         </div>
         <div class="layui-form-item">
          <div class="layui-input-block">
           <button class="layui-btn" lay-submit lay-filter="save" >    </button>
           <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >  </button>
          </div>
         </div> 
       </form>  
    </div>

c*js 코드
-layer 창 만 들 기

function onAddBtn(){
     //   -   
    layer.open({
        type: 1,
        title:"    ",
        closeBtn: false,
        shift: 2,
        area: ['400px', '300px'],
        shadeClose: true,
        // btn: ['  ', '  '],
        // btnAlign: 'c',
        content: $("#add-main"),
        success: function(layero, index){},
        yes:function(){
        }
      });
  }

-핵심 제출 방법

<script type="text/javascript">
  layui.use(['layer', 'form'], function () {
  var layer = layui.layer, 
  $ = layui.jquery, 
  form = layui.form;
  //    
  form.verify({
    firstpwd: [/(.+){6,12}$/, '    6 12 '],
    secondpwd: function(value) {
           if(value != $("#firstpwd").val()){
              $("#secondpwd").val("");
           return '          ';
          }
    },
    productCodes: function(value){
           if(value == ''){
           return "       ";
          }
    },
    sysqx: function(value){
          if(value == ''){
          return "     ";
          }
      } 
  });
 //      
 form.on('submit(save)', function (data) {
    params = data.field;
    //alert(JSON.stringify(params))
    submit($,params);
    return false;
  }) 
   var obj = document.getElementById('closeBtn');
   obj.addEventListener('click', function cancel(){
         CloseWin();
    });
})
//  
function submit($,params){
     $.post('${ctx}/golbal/add1', params, function (res) {
        if (res.status==1) {
          layer.msg(res.message,{icon:1},function(index){
            CloseWin();
          }) 
        }else if(res.status==2){
          layer.msg(res.message,{icon:0},function(){
            parent.location.href='${ctx}/golbal/main';
            CloseWin();
            })
        }else{
          layer.msg(res.message,{icon:0},function(){
            location.reload(); //     
               return false
          })
        } 
      }, 'json');
    }
debugger;
 //    
 function CloseWin(){
   parent.location.reload(); //      
   var index = parent.layer.getFrameIndex(window.name); //     iframe    
   parent.layer.close(index); //      
 } 
  
</script>

d*배경 코드
- 

    /**
   *     
   * @return
   */
  @RequestMapping("/add1")
  @ResponseBody
  public ResultEntity addItem(ZkGolbal golbal) {
    ResultEntity res = new ResultEntity();
    try {
      golbal.setStatus("1");
      res.setData(golbalService.addItem(golbal));
      res.setSuccess("success");
      res.setMessage("    ");
    } catch (Exception e) {
      res.setMessage("    ");
      e.printStackTrace();
    }
    return res;  
  }

총결산
위 에서 말씀 드 린 것 은 레이 어 팝 업 창 과 레이 어 폼 을 사용 하여 새로운 기능 을 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!