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('

' + key + ': ' + value + '

')

});

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

{

$('#table').bootstrapTable('toggleDetailView', i);//展开详情行

}