值得分享的轻量级Bootstrap Table表格插件

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

3）、指定数据源，这里有两种方式

方式1：通过data属性标签

在一个普通的表格中设置data-toggle="table"可以在不写JavaScript的情况下启用Bootstrap Table。




<table data-toggle="table" data-url="data.json">
   <thead>
    ... 
   </thead>
  </table>



方式2：通过JavaScript设置数据源

通过JavaScript来启用带有id属性的Table。




$('#table').bootstrapTable({
   url: 'data.json' 
  });:



4、Bug描述：



用标签属性方式设置字段formatter时，发现没有效果，图片不清楚，大家可以直接下载实例进行研究，下载地址。

如：<th data-field="sex" data-formatter="format_sex">性别</th>

1)、原因：

bootstrap-table.js第399行，代码中只判断了formatter typeof 为function的情况

2)、解决办法：

修改第399行代码块：

修改前




if (typeof that.header.formatters[j] === 'function') {
 value = that.header.formatters[j](value, item);
}



修改后：




if (typeof that.header.formatters[j] === 'function') {
     value = that.header.formatters[j](value, item);
    }else if(typeof that.header.formatters[j] === 'string') {
     if(typeof window[that.header.formatters[j]] === 'function') {
     value = window[that.header.formatters[j]](value, item);
     }
    }


如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。