Bootstrap表格插件Bootstrap Table配置教程

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);//展开详情行
}


文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式