2021-04-08

关于Layui的Layer和Form的遇到问题

1. form表单

问题：layui有自己完整的一套js使用规则，否则不能正常使用，要按照它的规则去使用，我就是经常习惯性的用原生js和jquery所以就常出错。
DOM:

  <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

JS：

layui.use(['form','element'], function(){
        var element=layui.element;
        var form = layui.form;
        form.on('submit(formDemo)',function (data) {
            layer.msg(JSON.stringify(data.field));
            //这个returnfale不能少，否则表单会按以action的方式提交，layui就不能正常监听form表单，因为form会走原始的action提交url
            return false;
        }

2.Layer弹窗

问题：怎样实现点击iframe页面的一个按钮之后关闭弹窗，回到父窗口？
相关代码：

layui.use(["element","layer"],function (){
        var element=layui.element;
        var layer=layui.layer;
        $("#add").click(function () {
         layer.open({
             type:2,
             title:"测试",
             area:['600px','500px'],
             //这个content是一个url，对应另外一个页面
             content:"/userRoles/test"

         })
        })
    })

在弹出层出来之后，我们进行一顿操作，然后点击按钮提交，这时候遇到的问题就是点击提交按钮之后，页面直接在弹出层里面跳转，且没有关闭弹出层，然不是我想要的效果，所以如何解决？
解决方式：在content对应的那个页面里面一顿操作，
添加以下代码：

//在处理好数据处理之后，如使用ajax，就可以在success里面加入以下代码，
效果是：两秒后自动关闭弹出层
setTimeout(function () {
               window.parent.location.reload()
             var index= parent.layer.getFrameIndex(window.name)
              parent.close(index)},2000)

以上