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

Bootstrap Table插件简单易用，只需进行简单的配置，就能获得强大的功能支持，如固定表头、单选、复选、排序、分页、搜索以及自定义表头等。这不仅能提高开发效率，还能减少开发时间。

一、插件概述

二、主要特点

1. 基于Bootstrap 3开发，支持Bootstrap 2。

2. 响应式界面，适应不同屏幕尺寸。

3. 固定表头功能，方便用户随时查看表头信息。

4. 完全可配置，满足个性化需求。

5. 支持data属性，方便数据绑定。

7. 支持使用AJAX获取JSON数据，方便与后端交互。

8. 点击表头可简单排序，方便用户按照不同字段进行排序。

9. 支持自定义列显示，满足个性化展示需求。

10. 支持单选和复选，方便用户选择数据。

11. 强大的分页功能，方便用户分页查看数据。

12. 支持名片布局，适应不同场景需求。

13. 支持多语言，方便不同语言的用户使用。

三、使用方法

1. 引入Bootstrap库和bootstrap-table.css。

2. 引入jQuery库和bootstrap-table.js（如果项目还未使用这些库）。

3. 指定数据源。有两种方式：

方式2：通过JavaScript来启用带有id属性的Table。例如：$('table').bootstrapTable({url: 'data.json'});。

四、问题解答

在使用Bootstrap Table时，可能会遇到一些问题和bug。比如，当用标签属性方式设置字段formatter时，可能会发现没有效果。如果遇到这种情况，建议直接下载实例进行研究，以便更好地理解和使用插件。

在bootstrap-table.js的第399行附近，代码正在对表头的formatter进行检查。这个formatter是一个强大的工具，允许我们自定义表头数据的展示方式。但初始的代码仅考虑了formatter为函数类型的情况。除了函数类型，还有一种情况是表头formatter是字符串类型，并且这个字符串对应了一个全局函数。这种灵活性为我们提供了更大的操作空间。为了更好地处理这两种情况，我们可以对代码进行相应的修改。

修改后的代码如下：

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);

} else {

console.warn('Formatter string does not represent a valid function.'); // 提示错误信息

}

}