Maison > interface Web > Tutoriel Layui > Comment utiliser les fenêtres contextuelles de calque et les formulaires layui pour ajouter de nouvelles fonctions

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

Libérer: 2020-01-10 17:12:59
avant
5033 Les gens l'ont consulté

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

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

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>
Copier après la connexion

Créer une fenêtre contextuelle de calque window

function onAddBtn(){
         //页面层-自定义
        layer.open({
                type: 1,
                title:"新建配置",
                closeBtn: false,
                shift: 2,
                area: [&#39;400px&#39;, &#39;300px&#39;],
                shadeClose: true,
               // btn: [&#39;新增&#39;, &#39;取消&#39;],
               // btnAlign: &#39;c&#39;,
                content: $("#add-main"),
                success: function(layero, index){},
                yes:function(){
                    
                }
            });
   }
Copier après la connexion

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>
Copier après la connexion

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;    
    }
Copier après la connexion

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal