大概流程

 1. 点击按钮打开子页面(layer.open)
 2. 子页面负责数据输入,通过函数封装好数据供父页面使用
 <script>
    var callbackdata = function () {
        var data = {
            distributeId: $("#distributeId").val(),
        };
        return data;
    }
</script>
```)
 3. 点击提交,通过子页面的函数向父页面传递数据,(父页面获取数据代码:var res = window["layui-layer-iframe" + index].callbackdata();4. 成功,数据重新搜索
  tableIns1.reload({
                 page:{
                      curr:1   //表格重载的时候将查询页数设为第一页
                       }
                  })
1.1 layui数据表格以及监听(父页面)

在这里插入图片描述

//按钮监听
<a class="layui-btn layui-btn-xs" lay-event="handle3">办结|退回</a>

//事件绑定
if (obj.event === 'handle3') {
                var index =  layer.open({
                    type: 2,
                    title: '办结|退回',
                    maxmin: true,
                    area: ['100%', '100%'],
                    shadeClose: false, //点击遮罩关闭
                    content: '/XXX',
                    btn: ['立即提交','关闭'],
                    btnAlign: 'l',    //按钮显示在左侧
                    cancel: function () {
                        layer.close(index); //关闭加载层
                    },
                    yes: function(index){
                        //当点击‘立即提交’按钮的时候,获取弹出层返回的值 
                        //callbackdata 为弹出页面中的函数
                        var res = window["layui-layer-iframe" + index].callbackdata();
                        $.ajax({
                            headers: {"authorization": token},
                            type: "PUT",
                            url: "/XXX",
                            dataType: "JSON",
                            contentType: "application/json",
                            data: JSON.stringify(res),
                            success: function (result) {
                                layer.msg(result.msg);
                                layer.close(index); //关闭加载层
                                //tableIns1  为layui数据表格
                                tableIns1.reload({
                                    page:{
                                        curr:1   //表格重载的时候将查询页数设为第一页
                                    }
                                })
                            }
                        });
                        return false;
                    },
                });
            }
1.2 数据录入(子页面)
 <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label required">建议</label>
            <div class="layui-input-inline">
                            <textarea rows="7" placeholder="请输入建议" style=" width: 290%;resize: both"
                                      id="entryAndDistributionOpinionId" name="entryAndDistributionOpinion"
                                      class="layui-textarea"></textarea>
            </div>
        </div>
    </div>

//callbackdata    这个函数名和1.1中  var res = window["layui-layer-iframe" + index].callbackdata(); 对应
<script>
    var callbackdata = function () {
        var data = {
            distributeId: $("#distributeId").val(),
        };
        return data;
    }
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐