LayUI-在不刷新父页面的前提下，在子页面里面修改父页面里的某个值

借助LayUI里面的parent.方法名可以实现：在子页面里调用父页面里的方法。

• 通过parent关键字，子页面就可以调用父页面的变量、方法，还可以刷新父页面（比如：parent.location.reload();——在子页面里面刷新父页面）。

一、实现效果

二、实现代码

父页面：

1、渲染数据表格数据

2、 点击数据表格中的请假天数，弹出一个新页面弹窗

$('body').on('click','.leaveDaysDetails',function () { // 点击数据表格中的请假天数，弹出一个新页面弹窗
    var id = $(this).attr('data-id'); // 获取到数据表格中当前行的id
    
    var rowData = $(this).attr('data-row');
    var index = JSON.parse(rowData).LAY_INDEX - 1; // 获取到数据表格中当前行的索引值index
    
    layer.open({
       type: 2, // 因为是以弹窗形式打开一个新页面，所以这儿应为2
       title: '请假天数',
       area: ['335px', '450px'], // 宽高
       content: "{:url('editLeaveDetail')}?aid="+id+"&type=1&index="+index,
    });
})

【补充知识】 通过parent，在子页面里面可以调用父页面里的方法。

• 比如：在父页面里面封装一个方法changeLeaveMoney，只要把它写成window.changeLeaveMoney = function() {}；那么，在子页面里面，就可以通过parent.changeLeaveMoney()来调用该方法啦~
• 下面就是用的上述方法实现在子页面里修改父页面里的值，且不刷新父页面哟。

3、封装一个函数：改变对应的请假天数和请假扣除

window.changeLeaveMoney = (v,i,count) => { // v、i、count由子页面传过来
    console.log(v);
    console.log(i);
    console.log(count);
    
    $("div[lay-id='testReload']").find("tr[data-index="+i+"]").find('td[data-field="leave_money"] div').text(v); // 改变请假扣除的值（找到对应DOM节点，见下图）
    $("div[lay-id='testReload']").find("tr[data-index="+i+"]").find('td[data-field="leaves"] div div').text(count); // 改变请假天数的值（找到对应DOM节点，见下图）
}

子页面：

<script>
  var get_url = location.search; //获取url中"?"符及其后面的字符串 (比如：'?convenient=1')
  var theRequest = new Object(); // 自定义一个空对象 {}
  if ( get_url.indexOf( "?" ) != -1 ) { // 如果get_url里面包含了"?"符
    var str = get_url.substr(1); //substr()方法返回从参数值开始到结束的字符串，即去掉"?"符；
    var strs = str.split("&");
    for ( var i = 0; i < strs.length; i++ ) {
      theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
    }
  }
  console.log( theRequest ); //此时的theRequest就是我们需要的参数的对象合集 比如：{convenient: '1'}

  // 点击提交按钮
  function submitData() {
    var data = {
      type: theRequest.type, // 1-请假 2-迟到早退
      aid: theRequest.aid, // 薪资id
    }
    
    var datas = {:json_encode($data)}; // PHP写法-获取到后台传过来的数据$data
    
    var values = [];
    for(var i in datas) { // 遍历对象
      data[datas[i].id] = $(`input[name="${datas[i].id}"]`).val(); // 对象添加动态属性
      $(`input[name="${datas[i].id}"]`).each(function () {
        values.push($(this).val());
      })
    }
    var count = values.reduce(function (pre,cur) { // reduce高阶函数求和
      return pre*1 + cur*1
    },0)
    console.log(count) // 加起来的总和，即修改后的请假天数总和

    $.ajax({
      url: '{:url("editLeaveDetail")}', // PHP写法-editLeaveDetail是请求地址
      type: 'post',
      dataType: 'json',
      data: data,
      success: function (res) {
        if(res) {
          if(res.sta == 2000) {
            layer.msg(res.msg,{time:1500},function () {
              location.reload(); // 刷新页面数据
              // console.log(res.data);

              parent.changeLeaveMoney(res.data.leave_money,theRequest.index,count); // 调用父页面的方法
            })
          } else {
            layer.msg(res.msg)
          }
        } else {
          layer.msg('请求失败，请稍后再试')
        }
      },
      error: function (err) {
        console.log(err)
      }
    })
  }
</script>

当在一个页面点击一个按钮后弹出一个iframe，如何让改页面的数据传到子页面iframe的文本框等。以下演示的是把layui表格中当前行数据传到子页面，常用情况：编辑

本内容相关的项目实现系统已发布点此查看，收银员账号密码：1001密码123，源码可以到主页下载

layui表格的cols

		cols:
                [[
                    {type: "checkbox", fixed: "left"},

                    {field: 'gid', width: 80, title: 'ID', sort: true,align:"center"},
                    {field: 'gno', width: 110, title: '商品编号',align:"center"},
                    {field: 'gname', width: 200, title: '商品名称', sort: true,align:"center"},

                    {field: 'price', title: '原价', minWidth: 80, sort: true,align:"center"},
                    {field: 'isBargainPrice', width: 110, title: '是否特价',align:"center"},
                    {field: 'bargainPrice', width: 110, title: '特价价格', sort: true,align:"center"},
                    {field: 'unit', title: '单位', minWidth: 80, sort: true,align:"center"},
                    {field: 'stock', width: 110, title: '库存余量', sort: true,align:"center"}
                    , {title: '操作',width:120, toolbar: '#currentTableBar', align: "center", fixed: "right"}

                ]],

我这里是通过点击layui的tool的编辑按钮（表格行的最后的按钮）弹出一个iframe，下面是点击按钮后传输数据的方法，同时打开子页面

 if (obj.event === 'edit'&&identify=="管理员") {

                var index = layer.open({
                    title: '编辑商品',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '/editGoods',
                    success:function () {
                        //表单数据回显，把表格当前行显示到子页面的表单内，find后括号内的是子页面表单的id
                        var body = layer.getChildFrame('body',index); body.find("#gid").val(data.gid);
                        var body = layer.getChildFrame('body',index); body.find("#gno").val(data.gno);
                        var body = layer.getChildFrame('body',index); body.find("#gname").val(data.gname);
                        var body = layer.getChildFrame('body',index); body.find("#price").val(data.price);
                        var body = layer.getChildFrame('body',index); body.find("#bargainPrice").val(data.bargainPrice);
                        var body = layer.getChildFrame('body',index); body.find("#unit").val(data.unit);
                        var body = layer.getChildFrame('body',index); body.find("#stock").val(data.stock);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } 

子页面iframe的代码，表格数据都将映射到对应id的表单内，编辑完成后有一个保存按钮，点击保存按钮则关闭当前子页面。

<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">当前商品id</label>
        <div class="layui-input-block">
            <input type="text" name="gid" readonly="readonly" id="gid" lay-verify="required"
                   value="" class="layui-input">
            <tip>不可编辑。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品编号</label>
        <div class="layui-input-block">
            <input type="text" readonly="readonly" lay-verify="number|required" placeholder="请输入卡号"name="gno" id="gno"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label required">商品名称</label>
        <div class="layui-input-block">
            <input type="text" lay-verify="required" name="gname" id="gname" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">原价</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="required|number" name="price" id="price" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">是否特价</label>
        <div class="layui-input-inline">
            <select name="isBargainPrice" id="isBargainPrice">

                <option value="是">是</option>
                <option value="否">否</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">特价价格</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="required|number" name="bargainPrice" id="bargainPrice" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">单位</label>
        <div class="layui-input-inline">
        <select name="unit" id="unit" lay-search="">
            <option value="斤"> 斤</option>
            <option value="个"> 个</option>
            <option value="瓶"> 瓶</option>
            <option value="盒"> 盒</option>
            <option value="箱"> 箱</option>
            <option value="本"> 本</option>
            <option value="根"> 根</option>
            <option value="提"> 提</option>
            <option value="串"> 串</option>
            <option value="罐"> 罐</option>
            <option value="袋"> 袋</option>
            <option value="件"> 件</option>
            <option value="千克">千克</option>
            <option value="双"> 双</option>
            <option value="台"> 台</option>
            <option value="只"> 只</option>
            <option value="支"> 支</option>
            <option value="张"> 张</option>
            <option value="捆"> 捆</option>
            <option value="部"> 部</option>
            <option value="辆"> 辆</option>
            <option value="包"> 包</option>

        </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">库存</label>
        <div class="layui-input-block">
            <input type="number" lay-verify="required|integer" name="stock" id="stock" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
</div>

保存按钮退出iframe事件，当然数据也将传送到后端

//监听提交
        form.on('submit(saveBtn)', function (data) {

            var goods = JSON.stringify(data.field)
            $.ajax({
                type: "POST",
                url: "/updateGoods",
                data:goods,
                contentType: "application/json;charset=utf-8",
                //async:false,
                success: function (result) {
                    if (result == "更新失败") {
                        alert("网络不佳！请稍后重试")
                    }

                },
                error: function (data, status, e) {
                    alert("网络不佳！请稍后重试");
                }
            })


            var index = layer.alert("修改成功", {
                title: '提示'
            }, function () {

                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                //更新父页面的表格
                window.parent.location.reload();
                parent.layer.close(iframeIndex);

            });

            return false;
        });

父级页面是列表页，当父级页面点击搜索新闻时，弹出子窗口（type:2）,并在子窗口中进行关键字的输入，由ajax提交到后台模糊搜索匹配到对应的字段，ajax请求成功后并关闭当前打开的子窗口，关闭子窗口的同时将查询到的数据传递回去给父页面。

思路：（在父页面中定义方法，子页面中拿到父页面的方法，用方法的参数进行传值）

1.实现打开子窗口，子窗口的type:2,在页面中进行表单数据的获取，进行ajax请求后台查询数据。

2.后台数据请求成功后，在子窗口中通过parent.layer.getFrameIndex(window.name)和parent.layer.close(index);方法自动关闭子窗口。

3.由于子窗口关闭后只剩下父页面，父页面并不能直接拿到子窗口请求的数据，这时需要在父页面加载方法$(document).ready(function() {})之后写一个接受数据的方法。参数为子窗口要返回的数据即可。

下面是图：

1.点击蓝色圈的按钮弹出子窗口

窗口中输入完数据进行ajax的提交查询

代码：

父级页面打开子窗口：

父级页面接收子窗口返回的数据的方法：

子页面请求的数据：（由于进行的是模糊查找，所以用户可能某些字段并不会输入，但是ajax传递的参数必须存在，则需要对数据进行重新的定义）；

//点击提交按钮 $("#submit").click(function(){        //以下是对数据进行定义，防止用户某些字段不提交时ajax报错        var titlename=null,            titleauthor=null,            titletype=null,            titletime=null,            titlecontent=null,            titlesstarte=null;         if($("#newtitle").val()!=""){            titlename=$("#newtitle").val();        }        if($("#newauthor").val()!=""){            titleauthor=$("#newtitle").val();        }        if($("#typeselectBox").val()!=""){            titletype=$("#typeselectBox").val();        }        if($("#newetime").val()!=""){            titletime=$("#newetime").val();        }        if($("#newcontent").val()!=""){            titlecontent=$("#newcontent").val();        }        if($("input[name=titlesstarte]:checked").val()!=""){            titlesstarte=$("input[name=titlesstarte]:checked").val();        }         //ajax请求后台        $.ajax({            url: '/JavaWeb/NewsFind',            type: 'POST',            dataType: 'json',            data: {                titlename: titlename,                titleauthor:titleauthor,                titletype:titletype,                titletime:titletime,                titlecontent:titlecontent,                titlesstarte:titlesstarte             },        })        .done(function(data) {            console.log(data);            layer.msg("查找成功");             //这里使用parent获取之前在父级页面中定义的接收子页面传递数据的方法，并将ajax的数据作为参数传递回去            parent.getChildrenData(data);             //等待900毫秒后自动进行当前子窗口的关闭            setTimeout(function(){                //当你在iframe页面关闭自身时                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引                parent.layer.close(index); //再执行关闭            },900);        })        .fail(function(data) {            console.log(data);             layer.msg("查找失败"+data);        });     });

此时当子窗口自动关闭后父页面也能拿到子窗口中ajax请求后台的数据。