bootstraptable 如何根据子表是否有数据,来设置父子表前面的加号的显示隐藏
时间: 2024-03-12 19:45:43 浏览: 55
bootstrap控制table列的显示隐藏
可以利用 Bootstrap Table 提供的 onExpandRow 事件,当某一行展开或折叠时触发该事件,我们可以在该事件中进行判断子表是否有数据,从而设置父子表前面的加号的显示隐藏。
具体实现方法如下:
1. 首先,在表格初始化时,需要在父表的 columns 中设置一个 formatter 函数,用于自定义父表前面的加号图标。
```javascript
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
formatter: function (value, row, index) {
return '<i class="glyphicon glyphicon-plus"></i>';
}
}]
```
2. 然后,在 onExpandRow 事件中,我们可以通过 row 参数获取当前展开的行的数据,进而判断该行对应的子表是否有数据。如果有数据,则将父表前面的加号图标变为减号;如果没有数据,则隐藏父表前面的加号图标。
```javascript
onExpandRow: function (index, row, $detail) {
var $subTable = $detail.html('<table></table>').find('table');
$subTable.bootstrapTable({
data: row.subTableData,
columns: [{
field: 'id',
title: 'Sub ID'
}, {
field: 'name',
title: 'Sub Name'
}]
});
// 判断子表是否有数据,设置父子表前面的加号图标
var $icon = $(this).find('tr[data-index="' + index + '"] > td:first-child > i');
if (row.subTableData && row.subTableData.length > 0) {
$icon.removeClass('glyphicon-plus').addClass('glyphicon-minus');
} else {
$icon.hide();
}
}
```
通过以上方法,可以根据子表是否有数据来设置父子表前面的加号的显示隐藏。
阅读全文