当在一个页面点击一个按钮后弹出一个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;
});
|