在layui的弹出层数据调用

 ̄綄美尐妖づ 提交于 2020-08-05 04:18:11

在使用“编辑”按钮时,要使用弹出层,并且要将当前所选项的值传递给弹出子页面。

父层:

function editUser(edit){
    var index = layui.layer.open({
        title : "编辑用户",
        type : 2,
        content : "uIAction_page_user_userEdit",//弹出层页面
        area: ['500px', '560px'],
        success : function(layero, index){
            var body = layui.layer.getChildFrame('body', index);
            if(edit){
                // 取到弹出层里的元素,并把编辑的内容放进去
                body.find(".id").val(edit.id);  //将选中的数据的id传到编辑页面的隐藏域,便于根据ID修改数据
                body.find(".password").val(edit.password);  //密码
                body.find(".userEndTime").val(edit.userEndTime);  //登录时间
                body.find(".userName").val(edit.userName);  //登录名
                body.find(".userEmail").val(edit.userEmail);  //邮箱
                body.find(".userSex input[value="+edit.userSex+"]").prop("checked","checked");  //性别,单选按钮
                body.find(".userGradeHide").val(edit.userGradeId);  //会员等级,注意:这里我只把等级ID放到弹出层页面的隐藏域,然后再使用ajax查询等级列表,动态生成下拉列表
                body.find(".userStatus").val(edit.userStatus);    //用户状态
                body.find(".userDesc").text(edit.userDesc);    //用户简介
                // 记得重新渲染表单
                form.render();
            }
            setTimeout(function(){
                layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                    tips: 3
                });
            },500)
        }
    })

子层

<form class="layui-form" style="width:80%;">
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">登录名</label>
        <div class="layui-input-block">
            <!-- 使用隐藏域用于保存编辑项的ID值,便于提交修改 -->
            <input type="hidden" class="id" name="id">
            <input type="hidden" class="password" name="password">
            <input type="hidden" class="userEndTime" name="userEndTime">
            <input type="text" class="layui-input userName" lay-verify="required" placeholder="请输入登录名" disabled>
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input userEmail" lay-verify="email" placeholder="请输入邮箱">
        </div>
    </div>
</form>

参考文章:

  1. layui之弹出层--从父窗口传递数据到子窗口
  2. 《layUI的iframe弹出层的父子页面数据交互》
  3. 第一次使用Layui 分页
  4. 说说layer的iframe弹窗给里面的标签赋值的问题
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!