本文介绍在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数据修改回显的方法能对大家有所帮助，欢迎参考并支持本站。