bootstrap table detailView 详细视图默认展开|选择展开

the_will_of_god

于 2019-12-02 11:31:05 发布

阅读量6.3k

点赞数 1

分类专栏： web前台 # bootstrap table 文章标签： bootstrap table detailView 详细视图展开父子表

本文链接：https://blog.youkuaiyun.com/dlutsunmingze/article/details/103345027

版权

web前台同时被 2 个专栏收录

4 篇文章

订阅专栏

bootstrap table

2 篇文章

订阅专栏

本文介绍如何使用Bootstrap Table的detailView属性展示长字段，包括默认展开所有详细视图及根据数据选择性展开的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近用到了bootstrap table 详细视图，展示字数比较多的字段，经过在网上查找，使用detailView实现，只需要做以下配置。

detailView:true,
detailFormatter:function(index,row){
    return  row.content;
}

效果如图（默认是收起的）

展开的效果

接下来为了更好的体验，要把详细视图全部展开。

api上好像没有，在网上找了一个不错的解决办法如下：

onPostBody(data) {
    expand(index);
}
function expand (index){ 
	$("#exampleTable").bootstrapTable('expandAllRows'); 
}

现在是默认全部展开了。

再进一步优化：有的行是没有详细视图的，所以收起没有详细视图的行，展开有详细视图的行。

onPostBody(data) {
    if(data) {
        $.each(data, function(index, item) {
            if(item.commentList && item.commentList.length != 0) {
			    expand(index);
            }
        });
    }
}

function expand (index){ 
	$("#exampleTable").bootstrapTable('expandRow', index); 
}

利用onPostBody的data参数，循环判断对应index，并在函数中选择性的展开。

ok，完结。