源起

最最开始的时候，在写公司的考勤系统，系统的功能十分简单，只需要简单地查询数据和展示数据（无需增加、修改和删除），后台接口使用的是标准的 Restful API，例如接口/api/url1返回这样的数组：

1
2
3
4
5
6
7

[
    {
        "name": "文翼",
        "startTime": "09:00",
        "endTime": "18:00"
    }
]

接口/api/url2返回这样的数组：

1
2
3
4
5
6

[
    {
        "name": "文翼",
        "job": "Web开发工程师"
    }
]

一般的做法是遍历返回来的数据并对每一行的数据进行渲染为tr，然后再append到表格中。由于自己十分的“懒”，很多时候宁愿写出个工具（当然有时候可能花的时候会更多），也不想写重复的代码，做重复、无用的工作。现在系统有 5 个不同的接口，需要显示为 5 个不同的表格。要是能使用这样的代码，而无需使用 JavaScript 去对不同的 API 接口进行渲染组装，那该多省心省事：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<table data-url="/api/url1">
    <thead>
    <tr>
        <td data-field="name">姓名</td>
        <td data-field="startTime">上班时间</td>
        <td data-field="endTime">下班时间</td>
    </tr>
    </thead>
</table>

<table data-url="/api/url2">
    <thead>
    <tr>
        <td data-field="name">姓名</td>
        <td data-field="job">工作</td>
    </tr>
    </thead>
</table>

可以看到，这样的话我们无需写一行 JavaScript 的代码就能实现我们想要的功能了。于是乎，Bootstrap Table 的 1.0.0 版本就这样面世了，只有最最简单的显示的功能，没有单选、多选、排序和分页等复杂的功能。

开源和改善

因为 Bootstrap Table 支持标准的 Restful API 接口，我便将其开源到 GitHub 上（6月份），并尝试着模仿 Bootstrap JavaScript Plugin 的文档说明，编写了全英文的文档（其实也没几个属性、方法和事件）。而在当时，由于公司最主要的产品 DBackup，并没有使用 Restful 接口 API，所以无法将其应用到自己的产品开发中。

随着其他的产品也应用到 Bootstrap Table，我便加入了单选、多选、排序等功能。而在 GitHub 上，关注 Bootstrap Table 的人也多了起来，时不时有人给我提建议和一些新的功能，而大部分是很好的建议。并认真地考虑，加上了大部分觉得合理的功能。

到发布 1.2.0 的时候（8月），我在想是不是应该应用到主要产品DBackup呢，只是要使用的话就得重构后台接口。不能浪费了，重构就重构，于是便开始为 DBackup 编写标准的 Restful API 文档，我们在开发的过程中往往习惯了根据后台接口，然后选择前端的实现。而 Bootstrap Table 是根据标准的 Restful API 来实现的，这反而能更好地使产品的接口更加规范化、文档化。

那么，或许你会问，开源又带来了什么？

在 GitHub 上，我们可以看到很多 Web 开源项目，而这些开源项目的工程师也乐于维护和改善这些开源项目，例如：Twitter 的 bootstrap，Facebook 的 react，阿里的 seajs，还有 node，backbone，angular.js 等等。

我在签名档上写道：

I am making the world better by developing open-source JavaScript libraries.

开源，就是为了使世界更加美好！哈哈，难道不是吗！

时至今日，Bootstrap Table 项目已有 488 个 Star 和 109 个 Fork（分支），47 个 Pull Requests，支持 20 种语言（翻译），以及 4 个插件扩展。除了我自己，有很多热心开发者为其提交了很多有用的代码，插件扩展和建议。

对于插件来说，因为开源，使其不断的完善和改进！

对于公司产品来说，因为开源，越来越规范化和模块化！

对于我来说，因为开源，自己的英文水平、代码规范化以及项目管理相关的方面也在不断提高！

Bootstrap Table 的强大之处

说了这么多，Bootstrap Table 的强大之处还是需要用个简单的例子来说明，除了上面用 html 的方式外，这里使用 JavaScript 的方式：

定义 html（只需要一句话）：

1

<table id="table"></table>

使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

$('#table').bootstrapTable({
    url: '/api/url', // 接口 URL 地址
    cache: false, // 不缓存
    height: 400, // 设置高度，会启用固定表头的特性
    striped: true, // 隔行加亮
    pagination: true, // 开启分页功能
    pageSize: 50, // 设置默认分页为 50
    pageList: [10, 25, 50, 100, 200], // 自定义分页列表
    search: true, // 开启搜索功能
    showColumns: true, // 开启自定义列显示功能
    showRefresh: true, // 开启刷新功能
    minimumCountColumns: 2, // 设置最少显示列个数
    clickToSelect: true, // 单击行即可以选中
    sortName: 'name', // 设置默认排序为 name
    sortOrder: 'desc', // 设置排序为反序 desc
    smartDisplay: true, // 智能显示 pagination 和 cardview 等
    columns: [{ // 列设置
        field: 'state',
        checkbox: true // 使用复选框
    }, {
        field: 'id',
        title: 'Item ID',
        align: 'right',
        valign: 'bottom',
        sortable: true // 开启排序功能
    }, {
        field: 'name',
        title: 'Item Name',
        align: 'center',
        valign: 'middle',
        sortable: true,
        formatter: nameFormatter
    }, {
        field: 'price',
        title: 'Item Price',
        align: 'left',
        valign: 'top',
        sortable: true,
        formatter: priceFormatter,
        sorter: priceSorter
    }, {
        field: 'operate',
        title: 'Item Operate',
        align: 'center',
        valign: 'middle',
        clickToSelect: false,
        formatter: operateFormatter,
        events: operateEvents
    }]
});

我们可以看到，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能了：

最后，今天，我们的产品 DBackup 发布了 4.0 版本，其中一整个大模块已经全部重构为使用 Bootstrap Table 和标准的 Restful 接口。虽说距离全部还有一段时间和距离，但我坚信，Bootstrap Table 会越做越强大，产品也会越来越规范，越做越好用！