Layui(三) iframe层(弹窗)input就有主窗体的传值

目的:主页面选中表格行数,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 用于让主页面传值定位(意思是:让主页面的值在哪里显示)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值