先看父页面的数据表格图
当点击编辑按钮时，弹出子窗口并赋值
#行工具栏代码
<script type="text/html" id="trtool">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑信息</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除用户</a>
</script>
<table class="layui-hide" id="user" lay-filter="table_user"></table>
/**
* 监听表格行工具事件
*/
//监听表格行工具事件
table.on('tool(table_user)', function(obj){
//table_user为表格的lay-filter的值
//获取当前操作的tr的相关数据
var data = obj.data;
console.log(data)
//判断事件名，做出不同的操作
if(obj.event === 'edit'){
layer.open({
title: '编辑用户',
type: 2,
shade: 0.2,
maxmin:true,
shadeClose: true,
area: ['50%', '50%'],
content: '/user/edit/',
success: function(layero, index){
// #aaa 表示的是弹出子页面的div的id值，
var div = layero.find('iframe').contents().find('#aaa');
var body = layer.getChildFrame('body', index);
<!-- console.log(div)-->
//获取子页面的index
var iframeWindow = window['layui-layer-iframe'+ index]
//给子页面id=aaa的dev里的不同ID值的元素赋值
div.find("#id").val(data.id);
div.find("#username").val(data.username);
div.find("#nickname").val(data.nickname);
div.find("#email").val(data.email);
div.find("#signature").val(data.signature);
<!-- body.find("#username").val(data.username);-->
}
});
//省略多余js代码
如下是content: ‘/user/edit/’, 对应的子页面
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'css/layui.css' %}" media="all">
<link rel="stylesheet" href="{% static 'layuimini/css/public.css' %}" media="all">
<style>
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form" id="aaa">
<div class="layui-form-item" >
<label class="layui-form-label required">用户id</label>
<div class="layui-input-block">
<input type="text" name="id" id="id" value="" class="layui-input" readonly>
</div>
</div>
<div class="layui-form-item" >
<label class="layui-form-label required">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">昵称</label>
<div class="layui-input-block">
<input type="text" name="nickname" id="nickname" lay-verify="required" lay-reqtext="昵称不能为空" placeholder="请输入昵称" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">所属角色</label>
<div class="layui-input-block">
<select name="roles" id="roles" lay-verify="required" lay-filter="xmFilter">
<option value=""></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" id="email" placeholder="请输入邮箱" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">个性签名</label>
<div class="layui-input-block">
<input type="text" name="signature" id="signature" placeholder="请输入个性签名" value="" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
</div>
</div>
</div>
</div>
<script src="{% static 'layui.js' %}" charset="utf-8"></script>
<script>
layui.use(['form'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.$;
//监听提交
form.on('submit(saveBtn)', function (data) {
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
$.ajax({
url:'/user/edit/',
type:'post',
async : false,
data:data.field,
});
// 关闭弹出层
layer.close(index);
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
console.log(res)
});
return false;
});
//动态获取角色
$.ajax({
url: '/roles/data/',
dataType: 'json',
type: 'get',
success: function (data) {
console.log(data);//下面会提到这个data是什么值
//使用循环遍历，给下拉列表赋值
$.each(data.data, function (index, value) {
// console.log(value.department_id);
$('#roles').append(new Option(value.title,value.id));// 下拉菜单里添加元素
});
layui.form.render("select");//重新渲染 固定写法
}
});
});
</script>
</body>
</html>
var div = layero.find('iframe').contents().find('#aaa'); 和子页面的 <div class="layui-form layuimini-form" id="aaa"> 是对应的，这样当点击编辑按钮就可以自动赋值到子页面的表单，然后根据具体情况去修改后传到后端去进行数据库的修改。
点击编辑按钮
至此，功能实现，作此记录方便日后翻阅。
