Heim > Web-Frontend > Layui-Tutorial > So verwenden Sie Ebenen-Popups und Laui-Formulare, um neue Funktionen hinzuzufügen

So verwenden Sie Ebenen-Popups und Laui-Formulare, um neue Funktionen hinzuzufügen

Freigeben: 2020-01-10 17:12:59
nach vorne
5030 Leute haben es durchsucht

So verwenden Sie Ebenen-Popups und Laui-Formulare, um neue Funktionen hinzuzufügen

1. Voraussetzung: Verwenden Sie die Ebene, um das Hinzufügen im Popup-Fenster abzuschließen. Nach Erfolg die Seite (übergeordnete Seite, Listenseite) auffordern und aktualisieren 2. Implementierung

Seitenrendering

So verwenden Sie Ebenen-Popups und Laui-Formulare, um neue Funktionen hinzuzufügenSeitencode:

Aus Formular erstellen

<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>
Nach dem Login kopieren

Ebenen-Popup erstellen Fenster

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(){
                    
                }
            });
   }
Nach dem Login kopieren

Kernübermittlungsmethode

<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>
Nach dem Login kopieren

Backend-Code

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

Für weitere Laui-Kenntnisse beachten Sie bitte die Spalte

Layui-Verwendungs-Tutorial

im PHP Chinesische Website.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ebenen-Popups und Laui-Formulare, um neue Funktionen hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage