2021-08-02

Layui 数据表格中的单选框与复选框，可以通过监听行单(双)击事件，在点击行数据的时候， 同时选中相应单(复)选框,不用每一次单独选中相应单(复)选框

//监听行单击事件
table.on(‘row(test)’, function(obj)
{ console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
});

//监听行双击事件
table.on(‘rowDouble(test)’, function(obj)
{
//obj 同上
})

创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器，如下所示

Html 部分：

JS 部分
var tabEmployee;
var layuiTable;
$(function () {
//加载&&初始化 layui 模块
layui.use([‘table’], function () {
layuiTable = layui.table;
tabEmployee = layuiTable.render({
elem: “#tabEmployee”,

cols: [[ { type: “checkbox”, fixed: “left” }
, { type: “numbers”, title: “序号” }
, { field: “EmployeeNumber”, title: “编号”, align: “center” },
]],
});

//监听行单击事件
layuiTable.on(‘row(tabEmployee)’, function (obj)
{ //标注选中行样式
obj.tr.addClass(“layui-table-click”).siblings().removeClass(“layui-table-click”);
/选中行，勾选复选框
obj.tr.find(“div.layui-unselect.layui-form-checkbox”)[1].click();
});
});
});

首先是获取到表格的 id，给的是监听单击事件，在给个回调函数，声明变量来获取数据， 下一行代码的是获取到点击的行，再就是找到 div 里的类名称，form 里的复选框点击。这 样就完成了 layui 的数据表格监听行的单击事件，如果要的效果是双击，就把 row 换成 rowDouble 就行了