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

最新推荐文章于 2023-05-03 15:28:27 发布

Legend丶伟

最新推荐文章于 2023-05-03 15:28:27 发布

阅读量650

点赞数 1

分类专栏：前端文章标签： layui jquery

本文链接：https://blog.csdn.net/Duke_CSDN/article/details/120184844

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

父界面打开方法

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>