前一篇《【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给编辑页,然后查出数据后再填充到表单。