精华内容
下载资源
问答
  • layui 修改父页面
    千次阅读
    2019-07-11 14:57:51

    layui框架  动态生成的列表页面为父页面,新增、编辑等弹出框的页面为子页面。现在要求在子页面关闭的时候,刷新父页面的table表单,需要连同查询条件一起更新查询。

    父页面表单:

    <table class="layui-table" id="test" lay-filter="demo"></table>

    直接刷新父页面:

    parent.location.reload();

    关闭当前页面:

    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);

    刷新父页面table(连同查询条件):

    parent.layui.table.reload('test');

    其中test为父页面table的id值。

    更多相关内容
  • LayUI-在不刷新父页面的前提下,在子页面里面修改父页面里的某个值

    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>
    
    展开全文
  • 以下演示的是把layui表格中当前行数据传到子页面,常用情况:编辑 本内容相关的项目实现系统已发布,收银员账号密码:1001密码123,源码可以到主页下载 layui表格的cols cols: [[ {type: "checkbox", fixed: ...

    当在一个页面点击一个按钮后弹出一个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;
            });
    
    展开全文
  • 思路:(在父页面中定义方法,子页面中拿到父页面的方法,用方法的参数进行传值) 1.实现打开子窗口,子窗口的type:2,在页面中进行表单数据的获取,进行ajax请求后台查询数据。 2.后台数据请求成功后,在子窗口中...

     

    父级页面是列表页,当父级页面点击搜索新闻时,弹出子窗口(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请求后台的数据。

    展开全文
  • 版权声明:请勿用于任何...//假设父页面有一个input: <input type='text' id='demo' name='code' value='zhangsan'/> //子页面要修改/获取该input的方法: $("#demo" , window.parent.document).val('李四'); /
  • Layui子页面向父页面传值(亲测有用)场景描述代码实现 场景描述 有一个列表,编辑某一列的信息时首先会弹出一个子页面,如图: 在这个子页面上可以修改单个信息,修改区域的时候由于需要下拉框,因此又会弹出一个子...
  • layui页面打开弹窗页面修改数据删除else if (obj.event === 'data') {admin.popup({title: '显示页面 - '+obj.data.页面编号, area: ['1100px', '700px'], id: '显示页面-popup-edit', success: function ...
  • 原文地址 问题: 想用location.href = "toLoginPage.action";退出登录页面,但是形成页面嵌套 解决:用父级元素调用 parent.location.href = "../user/login.html"; 解决: 最外层的页面跳转 top.location.href
  • layui子页面数据改变刷新父页面

    千次阅读 2019-04-15 20:11:15
    如下图:点击父页面按钮,弹出框,在弹出框内输入完信息后,父页面内的数据需要主动刷新下; 这里需要注意,由于使用框架本身的form监听提交事件,所以在提交成功后子页面会默认刷新下。导致用户体验很不好; ...
  • 首先 先给layui.open 取个id名 id: "maininsert-form", 调用子页面UE属性 var frameId = document.getElementById('maininsert-form').getElementsByTagName("iframe")[0] //调用子页面百度富文本 获取百度富...
  • 1 ,父页面js layer.open({ type: 2, title: '修改数据', shadeClose: false, shade: 0.8, area: ['60%', '60%'], co...
  • 也是从网上找的方法 记录下来。 layer.open({ ... title: '修改用户', shadeClose: true, //shade: 0.8, area: ['600px', '300px'], content: '/cate/admin-edit?id='+id, success : function(laye...
  • 父级页面调用子级页面方法 百度了一堆,没几个有用的,为避免以后会用到,在这记下笔记 layer.open({ title : "xxxx", type : 2, content : GlobeCreateUrl, area: [ '600px', '800px'], fix: false,
  • 首先我们双击行数据父页面打开一个/reconciliation/queryAllInfo子页面窗口 layui.use(['table', 'admin', 'ax'], function () { var $ = layui.$; var table = layui.table; var $ax = layui.ax; var admin = ...
  • 父页面通过 iframe 层弹框调用子页面,点击“确定“按钮时,获取子页面的DOM信息。
  • 今天用Layui做了个详情页,点了关闭按钮却怎么也没有反应,发现原来我一直是在对父页面进行关闭,得先获取到弹出的子页面的索引,再根据这个索引对子页面进行关闭。 var index = parent.layer.getFrameIndex(window....
  • 1、在父页面定义一个变量来判断是否需要刷新 var reload_flag = 0; 2、在子页面中修改该变量的值 parent.reload_flag = 1; 3、在父页面的弹出层关闭时通过该变量的值判断是滞需要刷新,使用layer.open的end事件 ...
  • 在弹出层layer之前,使用parent来操作,指定弹出到父页面上, 但是会出现,点击list页面添加按钮,没有任何的反应。 parent.layer.open为什么用不了的解决办法 父页面也需要 1.引入 layui.js 2. layui.use(['table',...
  • layui修改页面layer.open弹出层给子页面赋值 layer.open({ title: '信息维护', type: 2, shade: false, maxmin: true, shade: 0.5, anim: 1, area: ['850px', '95%'], content: basePath+'/jsp/info.jsp', ...
  • 如下所示: function open(t){ var id = $(t).attr("data-id"); var url = "{:U('home/.../...//弹出层结束后,刷新主页面 } ... }); } 关闭弹窗后,只刷新当前更改的那一项。(关闭弹窗后重新再获取新数据出来
  • 尝试使用下面3种方法解决,但是失败了,最后还是通过layui的弹出框解决的。 1、直接在子页面写弹框代码及弹框定位样式; 2、父页面放空div,覆盖整个父页面; 3、使用 $.load() 加载弹框内容
  • 1、layer弹框父页面调用子页面的方法 var minSpeak = layer.open({ type: 2, min: function(){ $('.layui-layer').css({ 'top': 'auto', 'left': 'auto', 'bottom': '27px', 'right': '0' }) }, ...
  • layui怎么刷新当前页面

    千次阅读 2021-01-13 14:44:16
    layui刷新当前页面的方法:首先打开相应的代码文件;然后通过“$.post("${base}/order/...推荐:《layUI教程》LayUI页面关闭和刷新问题一 编辑成功后刷新父页面$.ajax({type: "POST",url: "${base}/pm/pmshiftEdit...
  • layer弹出层子父页面传值 以及函数调用(其中包括从子页面重载父页面table) 这段时间使用layer开发项目,期间碰到了弹出层子父页面传值以调用函数的问题,解决之后在这里记录一下。 第一种情况:直接layer.open()...
  • 基于layui的x-admin模板,关闭子页面模态框,只重载父页面的数据表格
  • layer.open弹出子页面类型2 给个'/'并把选中的id传入 if(layEvent =='edit') { layer.open({ type:2, title:"修改员工", shadeClose:false, area: ['80%','85%'], content:'/adminEdit/'+data.empnum }); 把给的...
  • layui弹窗操作父级页面

    千次阅读 2019-04-15 17:33:18
    parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭父级窗体 parent.layui.table.reload('roleTree',{page:{curr:1}}); //刷新父级表格
  • layui使用layer对象的index来防止多窗口id冲突,但是打开iframe窗口时会产生新的layer对象,所以子窗口的layer.index重新从0开始计算,如果子页面打开iframe窗口次数过多,会让layer.index++至父页面相同的值,此时...
  • 实例如下: //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val())...以上这篇layer.open关闭父窗口 以及调用父页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希
  • 父页面: <button class="layui-btn" data-type="getCheckData"> <i class="layui-icon">&#xe61f;</i>修改 </button> 父页面js: getCheckData:function () { var checkStatus = table...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,216
精华内容 486
关键字:

layui 修改父页面