layui 弹出层回填父界面的数据

父界面打开方法

window.edit = function (obj) {
        let index = layer.open({
            type: 2,
            title: '修改',
            shade: 0,
            area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '400px'],
            content: '/view/***/add.html',
            btn: ['保存', '取消'],
            success: function (layero, index) {
                //获取弹出层子界面的body
                let body = layer.getChildFrame('body', index);
                //通过body定位子界面中的元素,并对输入框赋值,或者进行其他操作
                body.find('#id').val(obj.data.id)
                body.find('#userName').val(obj.data.userName)
                body.find('#nickName').val(obj.data.nickName)
                //对于选择框,依次判断数据是否相等,然后再添加选中属性
                body.find("input[name=roleId][value=1]").attr("selected", obj.data.roleId == 1 ? true : false);
                body.find("input[name=roleId][value=2]").attr("selected", obj.data.roleId == 2 ? true : false);
                body.find("input[name=roleId][value=3]").attr("selected", obj.data.roleId == 3 ? true : false);
                body.find('#phone').val(obj.data.phone)
                //得到iframe页的窗口对象
                let iframeWin = window[layero.find('iframe')[0]['name']];
                //重新加载表格
                iframeWin.layui.form.render();
            }, btn1: function (index, layero) {
                submit(index, layer)
            }
        });
    }

弹出层子界面示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑账户信息</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<form class="layui-form" action="" onsubmit="return false">
    <div class="layui-hide">
        <input type="number" id="id" name="id" autocomplete="off"
               class="layui-input">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label ">账号</label>
        <div class="layui-input-block">
            <input type="text" id="userName" name="userName" required lay-verify="required"
                   placeholder="请输入账号"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" id="nickName" name="nickName" required lay-verify="required"
                   placeholder="请输入用户名"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">用户角色</label>
        <div class="layui-input-block">
            <select name="roleId"  lay-verify="required" lay-search>
                <option value="1" >超级管理员</option>
                <option value="2" selected="true">管理员</option>
                <option value="3">普通员工</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" id="phone" name="phone" required lay-verify="required"
                   placeholder="请输入手机号"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>

</form>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值