-
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值。
更多相关内容 -
2022-03-29 工作记录--LayUI-在不刷新父页面的前提下,在子页面里面修改父页面里的某个值
2022-03-30 10:26:32LayUI-在不刷新父页面的前提下,在子页面里面修改父页面里的某个值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前端父页面向子页面传输数据/表格数据的问题(iframe,弹出层),关闭子页面更新表格,已解决
2021-07-24 20:57:22以下演示的是把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; });
-
layui 父页面获取弹窗传递的值 和 父页面传值给子弹窗的方法
2019-06-17 15:51:45思路:(在父页面中定义方法,子页面中拿到父页面的方法,用方法的参数进行传值) 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请求后台的数据。
-
layui 子页面向父页面传参的问题解决!
2021-07-15 21:20:59版权声明:请勿用于任何...//假设父页面有一个input: <input type='text' id='demo' name='code' value='zhangsan'/> //子页面要修改/获取该input的方法: $("#demo" , window.parent.document).val('李四'); / -
Layui子页面向父页面传值(亲测有用)
2020-09-17 15:36:21Layui子页面向父页面传值(亲测有用)场景描述代码实现 场景描述 有一个列表,编辑某一列的信息时首先会弹出一个子页面,如图: 在这个子页面上可以修改单个信息,修改区域的时候由于需要下拉框,因此又会弹出一个子... -
【layui】父页面传值到子页面,两种方式取值和table请求添加参数和ajax的区别
2020-12-20 19:02:37layui 主页面打开弹窗页面:修改数据删除else if (obj.event === 'data') {admin.popup({title: '显示页面 - '+obj.data.页面编号, area: ['1100px', '700px'], id: '显示页面-popup-edit', success: function ... -
layui子页面跳转到父页面
2021-09-07 09:42:22原文地址 问题: 想用location.href = "toLoginPage.action";退出登录页面,但是形成页面嵌套 解决:用父级元素调用 parent.location.href = "../user/login.html"; 解决: 最外层的页面跳转 top.location.href -
layui子页面数据改变刷新父页面
2019-04-15 20:11:15如下图:点击父页面按钮,弹出框,在弹出框内输入完信息后,父页面内的数据需要主动刷新下; 这里需要注意,由于使用框架本身的form监听提交事件,所以在提交成功后子页面会默认刷新下。导致用户体验很不好; ... -
layui.open 父页面调用子页面属性 方法等
2020-11-23 10:07:46首先 先给layui.open 取个id名 id: "maininsert-form", 调用子页面UE属性 var frameId = document.getElementById('maininsert-form').getElementsByTagName("iframe")[0] //调用子页面百度富文本 获取百度富... -
layui 父页面向弹出框中的子页面form表单进行赋值
2019-03-25 15:31:061 ,父页面js layer.open({ type: 2, title: '修改数据', shadeClose: false, shade: 0.8, area: ['60%', '60%'], co... -
layui父页面往子页面传参问题
2019-07-11 13:37:46也是从网上找的方法 记录下来。 layer.open({ ... title: '修改用户', shadeClose: true, //shade: 0.8, area: ['600px', '300px'], content: '/cate/admin-edit?id='+id, success : function(laye... -
Layui父级页面调用子级页面方法
2021-05-15 10:44:45父级页面调用子级页面方法 百度了一堆,没几个有用的,为避免以后会用到,在这记下笔记 layer.open({ title : "xxxx", type : 2, content : GlobeCreateUrl, area: [ '600px', '800px'], fix: false, -
使用layui表格的时候,修改子页面数据,随时刷新父页面
2020-11-05 11:14:03首先我们双击行数据父页面打开一个/reconciliation/queryAllInfo子页面窗口 layui.use(['table', 'admin', 'ax'], function () { var $ = layui.$; var table = layui.table; var $ax = layui.ax; var admin = ... -
layui 父页面弹框中获取子页面的内容
2022-02-14 16:21:36父页面通过 iframe 层弹框调用子页面,点击“确定“按钮时,获取子页面的DOM信息。 -
Layui中layer关闭子页面和操作父页面元素
2020-07-03 09:51:47今天用Layui做了个详情页,点了关闭按钮却怎么也没有反应,发现原来我一直是在对父页面进行关闭,得先获取到弹出的子页面的索引,再根据这个索引对子页面进行关闭。 var index = parent.layer.getFrameIndex(window.... -
layui关闭弹出层子页面后刷新父页面实现
2019-11-29 10:42:101、在父页面定义一个变量来判断是否需要刷新 var reload_flag = 0; 2、在子页面中修改该变量的值 parent.reload_flag = 1; 3、在父页面的弹出层关闭时通过该变量的值判断是滞需要刷新,使用layer.open的end事件 ... -
layui框架--子页面弹出框layer显示在父页面上面
2020-11-20 22:39:18在弹出层layer之前,使用parent来操作,指定弹出到父页面上, 但是会出现,点击list页面添加按钮,没有任何的反应。 parent.layer.open为什么用不了的解决办法 父页面也需要 1.引入 layui.js 2. layui.use(['table',... -
layui中修改页面layer.open type = 2 页面弹出层子页面、父页面传值
2021-04-07 16:48:30layui中修改页面layer.open弹出层给子页面赋值 layer.open({ title: '信息维护', type: 2, shade: false, maxmin: true, shade: 0.5, anim: 1, area: ['850px', '95%'], content: basePath+'/jsp/info.jsp', ... -
layui关闭弹窗后刷新主页面和当前更改项的例子
2020-12-12 05:39:09如下所示: function open(t){ var id = $(t).attr("data-id"); var url = "{:U('home/.../...//弹出层结束后,刷新主页面 } ... }); } 关闭弹窗后,只刷新当前更改的那一项。(关闭弹窗后重新再获取新数据出来 -
layui 子页面写弹出框覆盖父页面,以及给弹框中的表单赋值
2021-06-02 15:27:56尝试使用下面3种方法解决,但是失败了,最后还是通过layui的弹出框解决的。 1、直接在子页面写弹框代码及弹框定位样式; 2、父页面放空div,覆盖整个父页面; 3、使用 $.load() 加载弹框内容 -
关于layui iframe弹出层 父页面与子页面
2020-05-26 12:13:471、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:16layui刷新当前页面的方法:首先打开相应的代码文件;然后通过“$.post("${base}/order/...推荐:《layUI教程》LayUI页面关闭和刷新问题一 编辑成功后刷新父页面$.ajax({type: "POST",url: "${base}/pm/pmshiftEdit... -
layui layer弹出层iframe子父页面 传值以及函数调用
2021-05-18 12:56:37layer弹出层子父页面传值 以及函数调用(其中包括从子页面重载父页面table) 这段时间使用layer开发项目,期间碰到了弹出层子父页面传值以调用函数的问题,解决之后在这里记录一下。 第一种情况:直接layer.open()... -
x-admin模板基于layui的模态框关闭后,父页面数据表格重载的方式
2022-04-14 22:35:10基于layui的x-admin模板,关闭子页面模态框,只重载父页面的数据表格 -
layui弹出层父页面给子页面传值操作thymeleaf方法
2021-09-03 10:13:48layer.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:18parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭父级窗体 parent.layui.table.reload('roleTree',{page:{curr:1}}); //刷新父级表格 -
layui多重嵌套layui-iframe,子页面会覆盖父页面的解决方法
2020-04-22 14:46:26layui使用layer对象的index来防止多窗口id冲突,但是打开iframe窗口时会产生新的layer对象,所以子窗口的layer.index重新从0开始计算,如果子页面打开iframe窗口次数过多,会让layer.index++至父页面相同的值,此时... -
layer.open关闭父窗口 以及调用父页面的方法
2020-12-10 18:29:59实例如下: //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val())...以上这篇layer.open关闭父窗口 以及调用父页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希 -
Layui父页面向子页面传参,实现数据回显
2019-05-07 15:19:23父页面: <button class="layui-btn" data-type="getCheckData"> <i class="layui-icon"></i>修改 </button> 父页面js: getCheckData:function () { var checkStatus = table...