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>```