layui两个数据表格如何选中其中一个表格的一条数据移动到另一个数据表格中
时间: 2024-09-29 14:09:46 浏览: 39
layui框架下的数据表格通常通过JavaScript操作DOM元素来实现实时数据交换。如果你想从一个表格选择一条数据并移动到另一个表格中,可以按照以下步骤进行:
1. 首先,确保你的表格有适当的事件监听,比如点击行或者编辑按钮,用于触发数据选择。例如,在`<table>`标签上添加`data-id`属性来标识每行数据。
```html
<table lay-filter="table1">
<!-- 表格内容 -->
</table>
<table lay-filter="table2">
<!-- 表格内容 -->
</table>
```
2. 在js部分,给这两个表格分别绑定`onClickCell`或自定义事件,当用户点击某一行时获取该行数据,并存储起来。
```javascript
layui.use('laytable', function () {
var table1 = layui.laytable({
// table1配置...
});
var table2 = layui.laytable({
// table2配置...
});
table1.on('clickCell', function (obj) {
var dataId = $(obj.elem).attr('data-id');
var rowData = table1.data()[dataId];
// 可能需要先清除表2中已存在的同ID数据
table2.removeFilter('id', dataId);
table2.add({ // 添加到table2
id: dataId,
// 表2的数据项填充
...rowData
});
});
});
```
3. 当数据从第一个表格移动到第二个表格后,记得更新对应的业务状态或者数据库,以保持数据同步。
注意:以上示例是基于假设表格已经进行了数据初始化并且你可以直接操作数据数组。实际应用中,你可能需要结合服务器端操作来完成这个过程。
阅读全文