Layui Table 编辑回显实现详解

作者:纸飞机时间:2026-10-23 10:49:56浏览:203

本文介绍在Layui Table中实现数据修改回显的具体方法。核心思路是在监听表格工具栏事件后,通过Layer弹窗打开编辑表单,并在success回调中获取当前行数据,利用jQuery将数据字段值赋给对应的Form输入框ID,从而实现编辑时的数据回显。

Layui Table 编辑回显实现详解

首先展示一下最终实现的界面效果。

当用户点击对应的操作按钮时触发后续逻辑。

Layui Table 编辑回显实现详解

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

作者最新文章