使用layer彈窗和layui表單實(shí)現(xiàn)新增功能

1.需求：使用layer在彈窗內(nèi)完成新增，成功后提示并刷新頁面（父頁面，list頁面）

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、山南網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為山南等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

2.實(shí)現(xiàn)

a* 頁面效果圖

b*頁面代碼

--構(gòu)建from表單

<div id="add-main" >
       <form class="layui-form" id="add-form" action="">
         <div class="layui-form-item center" >
          <label class="layui-form-label"  >配置名稱</label>
          <div class="layui-input-block">
           <input type="text" name="name" required value=""  lay-verify="required" placeholder="請(qǐng)輸入配置名稱" autocomplete="off" class="layui-input">
          </div>
         </div>
         <div class="layui-form-item">
          <label class="layui-form-label" >配置類型</label>
          <div class="layui-input-block">
           <input type="text" name="type" required  lay-verify="required" placeholder="請(qǐng)輸入配置類型" autocomplete="off" class="layui-input">
          </div>
         </div>
         <div class="layui-form-item">
          <label class="layui-form-label" >配置值&emsp;</label>
          <div class="layui-input-block">
           <input type="text" name="value" required  lay-verify="required" placeholder="請(qǐng)輸入配置值" autocomplete="off" class="layui-input">
           <!-- <input type="hidden" name="id"  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代碼

-創(chuàng)建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;
  //表單驗(yàn)證
  form.verify({
    firstpwd: [/(.+){6,12}$/, '密碼必須6到12位'],
    secondpwd: function(value) {
           if(value != $("#firstpwd").val()){
              $("#secondpwd").val("");
           return '確認(rèn)密碼與密碼不一致';
          }
    },
    productCodes: function(value){
           if(value == ''){
           return "請(qǐng)選擇系統(tǒng)分配";
          }
    },
    sysqx: function(value){
          if(value == ''){
          return "請(qǐng)選擇權(quán)限";
          }
      } 
  });
 //提交監(jiān)聽事件
 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;
 //關(guān)閉頁面
 function CloseWin(){
   parent.location.reload(); // 父頁面刷新
   var index = parent.layer.getFrameIndex(window.name); //先得到當(dāng)前iframe層的索引
   parent.layer.close(index); //再執(zhí)行關(guān)閉 
 } 
  
</script>

d*后臺(tái)代碼

    /**
   * 新增配置
   * @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;  
  }

總結(jié)

以上所述是小編給大家介紹的使用layer彈窗和layui表單做新增功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

分享名稱：使用layer彈窗和layui表單實(shí)現(xiàn)新增功能
當(dāng)前網(wǎng)址：http://m.newbst.com/article14/gdcgde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站設(shè)計(jì)、微信小程序、搜索引擎優(yōu)化、網(wǎng)站建設(shè)、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

使用layer彈窗和layui表單實(shí)現(xiàn)新增功能