目的:主页面选中表格行数,iframe 的 input框打开时就有选中的表格行数值
(卡数量为1,表示 主页面只勾选了一行)
过程:
主页面代码:
HTML:
// 构造一个按钮触发事件
<button class="layui-btn layuiadmin-btn-list" data-type="bi" style="float:right">批量发卡
</button>
JS:
// bi 是按钮的 data-type="bi" layui另一种形式的事件过滤器
bi: function () {
var checkStatus = table.checkStatus('user_info')
//把表格选中的行数赋值给子页面,并在input框中显示
, checkData = checkStatus.data.length; //得到选中的数据
if (checkData.length === 0) {
return layer.msg('请选择数据');
}
layer.open({
type: 2
, title: '发卡'
, content: 'batch-iframe.html'
, maxmin: true
, area: ['550px', '550px'] // 页面大小
, btn: ['确定', '取消']
, success: function (layero, index) {
// 向iframe层传值,将值直接复制到iframe层的input框中
layero.find('iframe').contents().find("#card_num").val(checkData);
}
, yes: function (index, layero) {
var iframe = window['layui-layer-iframe' + index]; // 找到iframe层
//点击确认触发 iframe 内容中的按钮提交
var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
submit.click();
}
});
table.reload('user_info');
},
iframe层代码:
HTML:
<input type="text" name="card_num" id="card_num"
lay-verify="required" autocomplete="off" class="layui-input">
注:iframe 层html 用于让主页面传值定位(意思是:让主页面的值在哪里显示)