【Layui】弹出层(从父窗口传递数据到子窗口)

前一篇《【Layui】数据表格(与后台交互获取数据)》介绍了layui数据表格如何获取动态数据,接下来介绍下layui如何往弹出层子窗口传递表格数据

示例如图:
这里写图片描述
点击编辑按钮,弹出编辑弹出层,并显示相应的编辑数据
这里写图片描述

这里省略layui基础的语法,直接介绍关键代码

//userList.js
//编辑用户
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)
        }
    })
    //layui.layer.full(index);//设置弹出层布满窗口
    //改变窗口大小时,重置弹窗的宽高,防止超出可视区域(如F12调出debug的操作)
    $(window).on("resize",function(){
        //layui.layer.full(window.sessionStorage.getItem("index"));
    })
}

弹出层表单的代码:

<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>
	<div class="layui-row">
		<div class="magb15 layui-col-md4 layui-col-xs12">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block userSex">
				<input type="radio" name="userSex" value="男" title="男" checked>
				<input type="radio" name="userSex" value="女" title="女">
				<input type="radio" name="userSex" value="保密" title="保密">
			</div>
		</div>
		<div class="magb15 layui-col-md4 layui-col-xs12">
			<label class="layui-form-label">会员等级</label>
			<div class="layui-input-block">
				<!-- ajax动态生成等级列表 -->
				<select name="userGrade" class="userGrade" lay-filter="userGrade"></select>
				<!-- 使用隐藏域来保存其他页面传过来的用户等级ID -->
				<input type="hidden" class="userGradeHide" name="userGradeHide" />
			</div>
		</div>
		<div class="magb15 layui-col-md4 layui-col-xs12">
			<label class="layui-form-label">会员状态</label>
			<div class="layui-input-block">
				<select name="userStatus" class="userStatus" lay-filter="userStatus">
					<option value="0">正常使用</option>
					<option value="1">限制使用</option>
				</select>
			</div>
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<label class="layui-form-label">用户简介</label>
		<div class="layui-input-block">
			<textarea placeholder="请输入用户简介" class="layui-textarea userDesc" name="userDesc"></textarea>
		</div>
	</div>
	<div class="layui-form-item layui-row layui-col-xs12">
		<div class="layui-input-block">
			<button class="layui-btn layui-btn-m" lay-submit="" lay-filter="editUser">修改</button>
			<button type="button" class="layui-btn layui-btn-m layui-btn-primary cancle_btn">取消</button>
		</div>
	</div>
</form>

注意:这种做法不推荐使用,因为这是当初初学开发时采用的做法。真正常用的做法是传递该数据的ID给编辑页,然后查出数据后再填充到表单。

### Layui 组件间方法 #### 使用弹出组件递参数 当使用Layui的`layer.open()`函数打开一个新的窗口时,可以通过设置`content`属性中的URL来向新页面递查询字符串形式的数据[^1]。 对于更复杂的情况,比如需要递对象或数组,则可以在创建页面之前先将其存储到全局变量中,在页面加载完成后通过JavaScript访问这些数据。另一种方式是在父页面定义好回调函数并作为配置项的一部分递给页面实例化过程中调用[^4]。 #### 页面返回数据至父页面 为了实现从页面回信息给父级页面的功能,通常会利用`parent.layer`对象提供的API完成操作。具体来说就是获取当前iframe对应的索引号并通过它执行关闭动作的同时触发自定义事件携带额外负载回到上一逻辑环境内处理[^2]: ```javascript var index = parent.layer.getFrameIndex(window.name); // 假设要发送的信息保存在一个名为data的对象里 parent.window.someCallbackFunction(data); parent.layer.close(index); ``` #### 表格控件交互模式下的数据交换机制 如果涉及到的是表格类型的插件(如table模块),那么可能还会遇到一些特殊的场景——即希望能在不刷新整个视图的前提下动态更新显示内容。此时可以考虑构建一个通用的消息载体结构体用于承载状态码、提示文案以及实际业务实体集合等要素,并据此设计前后端接口规范确保双方能够按照既定契约顺利完成通信流程[^3]。 ```csharp public class layui_Information_Processing<T> { public int code { get; set; } public string msg { get; set; } public List<T> data { get; set; } } ``` 上述C#代码片段展示了一个简单的泛型类模板,适用于多种不同场合下服务器响应客户端请求时组织JSON格式的有效载荷部分。
评论 32
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值