前言：

Layui已经给出了多选记录的解决方案，是在每条数据的前面加上CheckBox，每次选择都有监听。效果是这样：

实现监听的代码如下，这是一种解决选择多条数据的方案：

table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"  console.log(obj.value); //得到修改后的值  console.log(obj.field); //当前编辑的字段名  console.log(obj.data); //所在行的所有相关数据  });

本文记录的是我使用的另一种解决方案，即展示两个表格。详细需求如下：

需求：

1、页面展示两个表格，左边表格展示所有数据，右边是一个空表格展示已经选中的数据。

2、当点击左边数据表格某条记录，右边表格动态添加这条记录。

3、表单提交的时候直接提交右边表格所有数据。

这样就实现了记录多选，相对比较直观。

实现效果：

实现步骤分析：

1、既然提交的是右边表格的数据，是动态添加的，说明是不断变化的数据集合，所以应该设为变量。

2、当点击左边的表格数据，应该获取当前这条数据和右边表格的所有数据，将当前行数据添加到右边的集合变量中。

3、进行表格重载，刷新右边的表格。

代码参考：

// 设置变量存储已选择列表的数据var tableBak = [];// 监听表格点击事件table.on('row(LAY_table_equipment)', function(obj) {　　var data = obj.data;　　// 设新变量存储右边列表的所有数据（源数据+选择的一条数据）　　var dataBak = [];　　// 源数据　　tableBak = table.cache.LAY_table_equipment_choose;　　// 去重　　for (var i = 0; i < tableBak.length; i++) {　　　　if (tableBak[i].id == data.id) {　　　　　　layer.msg("请勿重复添加！", {icon : 0,time : 1500});　　　　} else {　　　　　　dataBak.push(tableBak[i]);　　　　}　　}　　dataBak.push(data);　　tableBak = dataBak;　　// 表格重载　　table.reload("LAY_table_equipment_choose", {　　　　data : dataBak,　　})　　// 表格选中样式　　obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');});

注意：

tableBak = table.cache.LAY_table_equipment_choose;

table.cache.表格ID获取的是表格当页的所有数据，如果分页的话需要注意。