Layui组件Table绑定行点击事件和获取行数据的方法

作者:像素猫

时间:2026-10-22

浏览:136

本文介绍在Layui项目中,如何在表格初始化完成后,通过定位HTML元素为表格的tr绑定双击事件。利用done回调函数,结合JSON解析获取当前行索引,进而从数据集res.data中提取完整行数据,实现点击交互与数据获取功能。

文章目录

Layui Table行点击事件与数据获取实现

在项目中引入Layui框架时,开发者可能会遇到诸多潜在问题与挑战。

本文首先记录一个关于行点击事件处理的常见问题,后续将逐步补充其他相关经验。

在表格初始化完成后,可以通过事件机制为表格绑定双击事件。具体操作是定位到HTML代码中指定div内的table元素,为其tr标签绑定双击事件,随后获取当前行的Index索引,再从数据集中提取对应的行数据。


done: function(res, curr, count){
 $('#div').find('.layui-table-body').find("table" ).find("tbody").children("tr").on('dblclick',function(){
  var id = JSON.stringify($('#div').find('.layui-table-body').find("table" ).find("tbody").find(".layui-table-hover").data('index'));
  var obj = res.data[id];
  fun.openLayer(obj);
 })
}

以上介绍了Layui组件Table绑定行点击事件和获取行数据的具体方法,供读者参考。希望本文内容能对大家有所帮助,也欢迎继续支持本站获取更多技术分享。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章