【Layui】数据列表行点击事件设置（单选框）/（复选框）选中效果

最新推荐文章于 2024-09-18 17:14:39 发布

热心网友大熊

最新推荐文章于 2024-09-18 17:14:39 发布

阅读量2.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/cameronanderson/article/details/119863201

版权

本文介绍了如何在Layui表格中设置行点击事件，包括单选框和复选框的选中效果。对于单选框，通过监听row事件并改变行的样式来实现选中效果；而对于复选框，通过捕获tbody中的tr点击事件，定位到相应的复选框元素并触发点击事件来实现选中。同时，为了避免事件冒泡导致重复触发，对td内的复选框点击事件进行了拦截。

摘要由CSDN通过智能技术生成

Layui Table点击行时选中单选框

//注：test是table原始容器的属性 lay-filter="对应的值"
layui.table.on('row(i_Layer_SearchResult_Table_Filter)', function (obj) {
//选中行样式
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
//选中radio样式
obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
});

Layui Table点击行时选中复选框

$(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {
var index = $(this).attr('data-index');
var tableBox = $(this).parents('.layui-table-box');
//存在固定列
if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length > 0) {
tableDiv = tableBo