最近用到了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,完結。