bootstrap table detailView详情视图树形模式

bootstrap table detailView详情视图模式，当一个表格要显示很多列时（比如有20多列）通过电脑屏幕的宽度是一下子显示不了所有的列，这时有两种处理方法：
   1，固定列模式，把重要的列固定其他列可以通过表格底部滚动条左右拖动查看。
   2，detailView详情视图模式，只显示重要的列，当用户点击选中行时展开其他详情，有点类似树形控件的效果。

实现条件

1，设置detailView为true    
2，自定义detail-formatter函数detailFormatter  
3，引用fontawesome图标库 https://use.fontawesome.com/releases/v5.6.3/css/all.css

实现代码

 //详情视图模式
 $('#table').bootstrapTable({ 
            detailView:true, //1，开启详情视树形图模式
            detailFormatter:"detailFormatter", //2，定义详情显示函数
            columns: columns,
            data: data
 });
   
 //3, 定义详情显示函数  
 function detailFormatter(index, row) {
    var html = []
    $.each(row, function (key, value) {
      html.push('<p><b>' + key + ':</b> ' + value + '</p>')
    });
    return html.join('');
  }

在线试一试

detailViewIcon隐藏显示图标列

该属性需要配合detailViewByClick为true来使用，detailViewByClick点击行展开详情，该属性在1.15以下版本无效。

 $('#table').bootstrapTable({ 
      detailView:true, //1，开启详情视树形图模式
      detailFormatter:"detailFormatter", //2，定义详情显示函数
      detailViewIcon:false,//3，隐藏图标列
      detailViewByClick:true,//4,隐藏图标列
      columns: columns,
      data: data
 });

detailFilter详情展开条件

可以定义一个自定义函数来控制那一行可以展开详情，比如下面的自定义函数来控制偶数行点击可以展开详情。

 $('#table').bootstrapTable({ 
      detailView:true,  
      detailFormatter:"detailFormatter",  
      detailFilter:detailFilter
      columns: columns,
      data: data
 });
 function detailFilter(index, row) {
      return index % 2 === 0
 }

如何使detail View默认展开呢

官方并没有提供相关设置选项，但是我们可以通过以下方法间接实现

for(var i=0;i<行数;i++)
{
 $('#table').bootstrapTable('toggleDetailView', i);//展开详情行
}