bootstrap table 获取选中行数据传递到父页面
时间: 2023-08-05 13:07:03 浏览: 131
BootStrap Table 获取同行不同列元素的方法
可以使用 Bootstrap Table 提供的 `onCheck` 和 `onUncheck` 事件以及 jQuery 来实现。具体步骤如下:
1. 在子页面中使用 Bootstrap Table 渲染表格,并设置 `checkbox` 为可选中状态。
2. 在父页面中使用 `iframe` 引入子页面,并且在父页面中定义一个全局变量用来存储选中的行数据。
```javascript
// 定义一个全局变量
var selectedRows = [];
```
3. 在子页面中定义 `onCheck` 和 `onUncheck` 事件,在选中和取消选中时将选中的行数据传递给父页面。
```javascript
// 在子页面中定义 onCheck 和 onUncheck 事件
$('#table').bootstrapTable({
onCheck: function (row) {
// 将选中的行数据添加到全局变量中
window.parent.selectedRows.push(row);
},
onUncheck: function (row) {
// 将取消选中的行数据从全局变量中删除
var index = window.parent.selectedRows.findIndex(function (r) {
return r.id === row.id;
});
window.parent.selectedRows.splice(index, 1);
}
});
```
4. 在父页面中监听 `iframe` 的 `load` 事件,并且在子页面加载完成后获取子页面中的表格数据。
```javascript
// 在父页面中监听 iframe 的 load 事件
$('#iframe').on('load', function () {
// 获取子页面中的表格数据
var rows = $('#iframe')[0].contentWindow.selectedRows;
console.log(rows);
});
```
注意:在子页面中获取父页面的全局变量时,需要使用 `window.parent` 来访问父页面的全局变量。
阅读全文