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獲取的是表格當頁的所有數據，如果分頁的話需要注意。