Layui表格之动态添加数据（表格多选解决方案）

前言：

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获取的是表格当页的所有数据，如果分页的话需要注意。

 

转载于:https://www.cnblogs.com/Kingram/p/10514808.html