Layui Table 编辑回显实现详解
作者:纸飞机时间:2026-10-23 10:49:56浏览:203
本文介绍在Layui Table中实现数据修改回显的具体方法。核心思路是在监听表格工具栏事件后,通过Layer弹窗打开编辑表单,并在success回调中获取当前行数据,利用jQuery将数据字段值赋给对应的Form输入框ID,从而实现编辑时的数据回显。
Layui Table 编辑回显实现详解
首先展示一下最终实现的界面效果。
当用户点击对应的操作按钮时触发后续逻辑。


回显的本质是一个赋值过程。我们需要先获取Form表单中各个Input元素的ID,然后在数据展示成功的回调函数中,将当前行的数据绑定到这些输入框上。
table.on('tool(test)', function(obj) {
var data = obj.data; // 获得当前行数据
var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值)
var tr = obj.tr; // 获得当前行 tr 的DOM对象
if (layEvent === 'plan') {//修改操作
var data = obj.data;
layer.open({
title : '编辑用户',
type : 1,
area : [ '62%', '80%' ],
maxmin : true,
shadeClose : true,
content : $('#form'),
shade : 0 // 不显示遮罩
,
success : function(layero, index) {
layer.iframeAuto(index);
console.log(data)
$('#chc_id').val(data.chc_id); //回显的操作最重要的一步就是这个啦,其他的也是差不多的
}
});
} //if结束
});
以上就是核心逻辑的分享。
希望这篇关于Layui Table数据修改回显的方法能对大家有所帮助,欢迎参考并支持本站。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
