bootstraptable 父子表如何在子表有数据时才显示可展开的加号按钮
时间: 2024-03-12 22:45:03 浏览: 15
你可以通过自定义 formatter 方法来实现这个功能。首先,你需要在子表数据加载成功后获取到子表的数据,然后判断子表数据是否为空,如果不为空,则返回一个含有展开按钮的 html 字符串,如果为空,则返回一个不含有展开按钮的 html 字符串。下面是一个示例代码:
```javascript
function detailFormatter(index, row) {
var html = [];
// 判断子表数据是否为空
if (row.children && row.children.length > 0) {
html.push('<button class="btn btn-default btn-xs" data-toggle="collapse" href="#detail-' + index + '">');
html.push('<span class="glyphicon glyphicon-plus"></span>');
html.push('</button>');
}
return html.join('');
}
// 设置父子表
$('#table').bootstrapTable({
data: data,
detailView: true,
detailFormatter: detailFormatter,
onExpandRow: function(index, row, $detail) {
// 子表数据加载成功后的回调方法
$.get('/detail', function(res) {
$detail.html(res);
});
}
});
```
在上面的代码中,detailFormatter 方法用来自定义展开按钮的 html 字符串,当子表数据不为空时,会返回一个含有展开按钮的 html 字符串,否则返回一个不含有展开按钮的 html 字符串。在 onExpandRow 回调方法中,我们可以获取到子表的数据,并将其填充到子表中。这样,当子表数据不为空时,展开按钮就会显示出来,否则就不会显示。