layui 弹窗 form 表单数据回显实现
作者：橙子时间：2026-10-23 10:50:23浏览：292
本文介绍在 layui 中点击编辑按钮时，如何将表格数据回显至弹出子页面的 form 表单内。通过 layer.open 的 success 回调获取 iframe 窗口对象，利用 div.find 或 body.find 定位元素并赋值。建议表单属性名与表格字段名保持一致以简化遍历赋值逻辑，避免繁琐的逐个 ID 取值操作。
layui 弹窗表单数据回显实现
目标：点击编辑按钮后，将数据回显到弹出的子页面表单中。效果如下图所示：
HTML 代码结构如下：
<body>
<div class="layui-form" lay-filter="useradmin" id="useradmin">
<div class="layui-form-item">
<label class="layui-form-label">用 户 名</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
其它省略...
</div>
</body>JavaScript 代码实现如下：
layer.open({
type: 2
,title: '编辑用户'
,content: 'xx.html'
,maxmin: true
,area: ['500px', '450px']
,btn: ['确定', '取消']
,yes: function(index, layero){
省略...
}
,success: function(layero, index){
// 方式一 其实就是获取的 子页面的 div
var div = layero.find('iframe').contents().find('#useradmin'); // div.html() div里面的内容,不包含当前这个div
// 方式二
var body = layer.getChildFrame('body', index); // body.html() body里面的内容
/* ---- 附加内容 看看就好 Begin ---- */
var iframeWindow = window['layui-layer-iframe'+ index] // 方式一： 得到iframe页的窗口对象
var iframeWindow = window[layero.find('iframe')[0]['name']]; // 方式二： 得到iframe页的窗口对象
/* ---- 附加内容 看看就好 End ---- */
// 测试 ：
body.find("#username").val("admin"); // 方式一
div.find("#username").val("admin"); // 方式二
}
});关于 layui 表单数据的获取，可参考官方示例：https://www.layui.com/demo/table/operate.html 。
建议表单元素的属性名与表格列的属性名保持一致。这样在遍历赋值时只需一次操作，避免表单数据过多时需要编写大量类似 div.find("#id").val("") 的代码。
以上即为 layui 弹窗 form 表单赋值的实现方法，希望对大家有所帮助。
作者最新文章
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思？JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数：parseInt与Number的区别及用法
2026-11-03 17:26:54