Layui使用型为1的页面弹窗父子赋值方式--编辑页面传值

Layui使用型为1的页面弹窗父子赋值方式–编辑页面传值

在学习layui的弹窗时,发现网上只有type为2(即iframer弹窗),但无法满足基本需求,通过不断尝试,实验出了type=1(即页面层的弹窗方式),特此记录
父页面js

 layui.use(['layer'], function () {
          var  layer = layui.layer;//必须引入
                          layer.open({
                    type: 1,//1-页面弹窗
                    area: ['700px', '450px'],
                    content: 'test/iframe.html',//跳转地址,可以使后端地址
                    offset: '30px',
                    success: function (layero, index) {
                        layero.find('#id').val(data.id);//子页面的form-input的id
                        layero.find('#attrKey').val(data.attrKey);//子页面的form-input的id
                        layero.find('#attrType').val(data.attrType);//子页面的form-input的id
                        var valArr = data.attrValArray;
                        if (data.attrType === 2 || data.attrType === 3) { //动态子页面input框新增
                            layero.find('#attr-value').show();
                            if (valArr.length > 0) {
                                for (var i = 0; i < valArr.length; i++) {
                                    var htmlinfo = "";
                                    htmlinfo += '<div class="layui-form-item" id="xxVal' + (i + 1) + '">';
                                    htmlinfo += '<label class="layui-form-label myp-form-item-require" style="left: 63px; top: -2px;">新增属性:</label>';
                                    htmlinfo += '<div class="layui-input-inline" style="width: 50%; left: 45px;">';
                                    htmlinfo += "<input name= 'attrValue" + i + "' value='" + valArr[i] + "'  class='layui-input' style='height: 30px; width: 80%;' type='text' autocomplete='off' lay-verify='required' lay-reqtext='属性值不能为空'/>";
                                    htmlinfo += ' </div>';
                                    htmlinfo += '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm removeclass" style="position: absolute; left: 380px;" lay-event="delValue" id="delValue" data-type="delValue">删除</button>';
                                    htmlinfo += '</div>';
                                    layero.find("#button-group").before(htmlinfo);//在最后的按钮组之前添加(确保位置)
                                }
                            }
                        }
                    }
                });

}

子页面html

<style>
    #attr-edit {
        padding: 20px 25px 25px 0;
    }
</style>

<div class="layui-fluid" id="attr-edit">
    <form class="layui-form" action="" lay-filter="attr-edit-form" style="text-align: center" id="attr-edit-form">
        <div class="layui-form-item myp-hide">
            <label class="layui-form-label">ID:</label>
            <div class="layui-input-block">
                <input name="id" id="id" class="layui-input" type="text" autocomplete="off"/>
            </div>
        </div>
        <div class="layui-form-item" style="height: 60px;">
            <label class="layui-form-label myp-form-item-require" style="left: 63px; top: -2px;">属性名称:</label>
            <div class="layui-input-block" style="width: 50%;left: 45px;">
                <input name="attrKey" id="attrKey" class="layui-input" style="height: 30px" type="text"
                       autocomplete="off"
                       lay-verify="required" lay-reqtext="属性名称不能为空"/>
            </div>
        </div>
        <div class="layui-form-item" style="height: 60px;">
            <label class="layui-form-label myp-form-item-require" style="left: 63px; top: -2px;">属性类型:</label>
            <div class="layui-input-block" style="width: 50%; left: 45px;">
                <select name="attrType" id="attrType" lay-filter="attrType" style="width: 98.4436%;height: 30px;"
                        lay-verify="required" lay-reqtext="属性类型必选">
                    <option value="1" selected style="height: 30px">文本</option>
                    <option value="2" style="height: 30px">单选</option>
                    <option value="3" style="height: 30px">多选</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item myp-hide" id="attr-value">
            <label class="layui-form-label" style="left: 63px; bottom: 2px; top: -2px;">属性值:</label>
            <div class="layui-input-block" style="width: 18%;left: 35px;">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="addInput"
                        id="addInput" data-type="addInput">新增属性值
                </button>
            </div>
        </div>
        <div class="layui-form-item" id="button-group">
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-event="cancel" id="cancel"
                        data-type="cancel">取消
                </button>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="save" lay-submit=""
                        lay-filter="attr-form-submit" data-type="submit">保存
                </button>
            </div>
        </div>
    </form>
</div>```

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值