Comment utiliser les fenêtres contextuelles de calque et les formulaires layui pour ajouter de nouvelles fonctions

1. Condition : utilisez le calque pour terminer l'ajout dans la fenêtre contextuelle. Après succès, invitez et actualisez la page (page parent, page de liste)

2. Implémentation

Rendu de page

Code de page :

Construire à partir du formulaire

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

Créer une fenêtre contextuelle de calque window

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(){
                    
                }
            });
   }

Méthode de soumission principale

<script type="text/javascript">
 
  layui.use([&#39;layer&#39;, &#39;form&#39;], function () {
   var layer = layui.layer, 
   $ = layui.jquery, 
   form = layui.form;

   //表单验证
   form.verify({
       firstpwd: [/(.+){6,12}$/, &#39;密码必须6到12位&#39;],
       secondpwd: function(value) {
                     if(value != $("#firstpwd").val()){
                            $("#secondpwd").val("");
                     return &#39;确认密码与密码不一致&#39;;
                    }
        },
        productCodes: function(value){
                      if(value == &#39;&#39;){
                     return "请选择系统分配";
                    }
        },
        sysqx: function(value){
                    if(value == &#39;&#39;){
                    return "请选择权限";
                    }
           }  
    });


 //提交监听事件
  form.on(&#39;submit(save)&#39;, function (data) {
        params = data.field;
        //alert(JSON.stringify(params))
        submit($,params);
        return false;
    }) 
    
      var obj = document.getElementById(&#39;closeBtn&#39;);
      obj.addEventListener(&#39;click&#39;, function cancel(){
                  CloseWin();
        });
})

//提交
function submit($,params){
          $.post(&#39;${ctx}/golbal/add1&#39;, 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=&#39;${ctx}/golbal/main&#39;;
                        CloseWin();
                       })
                }else{
                    layer.msg(res.message,{icon:0},function(){
                        location.reload(); // 页面刷新
                             return false
                    })
                } 
            }, &#39;json&#39;);
       }
debugger;
 //关闭页面
 function CloseWin(){
     parent.location.reload(); // 父页面刷新
     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
     parent.layer.close(index); //再执行关闭 
 }  
   
</script>

Code backend

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

Pour plus de connaissances sur layui, veuillez faire attention à la colonne tutoriel d'utilisation de layui sur PHP Site chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!