Bootstrap-table使用教程

女爷i 2022-05-20 03:12 270阅读 0赞

--------------------

# 前言 #

我们先从Bootstrap-table（以下简称BS-table）的基础使用开始讲起，写法来说，BS-table主要分为两种写法，一种是HTML写法，一种是JS写法。这能这里用"HTML写法"和"JS写法"不太专业准确，我就先这么描述着吧，一会代码放上来就能明白我说的什么意思了。本文也主要将这两种写法的大部分（并不敢说我什么都会）使用方法告知大家。

【版本使用】

jQuery@3.3.1

备份地址：[https://gitee.com/fd214333890/jquery\_3.3.1][https_gitee.com_fd214333890_jquery_3.3.1]

bootstrap@4.1.1

备份地址：[https://gitee.com/fd214333890/Bootstrap\_4.1.1][https_gitee.com_fd214333890_Bootstrap_4.1.1]

bootstrap-table@1.12.1

备份地址：[https://gitee.com/fd214333890/Bootstrap\_table\_1.12.1][https_gitee.com_fd214333890_Bootstrap_table_1.12.1]

--------------------

# 二、使用 #

## 2.1 下载必要的插件 ##

本文所使用的必需的插件以及版本如下表2-1

<table>  表2-1 必需的插件及版本  
 <tbody> 
  <tr> 
   <th style="width:180px;">名称</th> 
   <th style="width:153px;">版本</th> 
   <th style="width:389px;">备注</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td style="width:180px;">jQuery</td> 
   <td style="width:153px;">3.3.1</td> 
   <td style="width:389px;">必须中的必需，不用我多说了吧</td> 
  </tr> 
  <tr> 
   <td style="width:180px;">Bootstrap</td> 
   <td style="width:153px;">3.3.7</td> 
   <td style="width:389px;">需要依赖jQuery</td> 
  </tr> 
  <tr> 
   <td style="width:180px;">Bootstrap-table</td> 
   <td style="width:153px;">1.12.1</td> 
   <td style="width:389px;"> <p>需要依赖Bootstrap</p> </td> 
  </tr> 
 </tbody> 
</table>

# #

如果使用bower或者npm下载Bootstrap的话，注意可能他会默认给下载Bootstrap v4版本的，因为这里使用的是Bootstrap@3.3.7，所以需要在下载的时候指定版本。如果是自己去官网下载的话，稍微注意一下别下载成了v4版本即可。

## 2.2 引入BS-table需要的库 ##

一个引入BS-table的HTML文件代码如下：

<!DOCTYPE html>
    <html>
      <head>
        <title>BS-table</title>
        
        <link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap.min.css">
        
        <link rel="stylesheet" href="/bower/bootstrap-table/dist/bootstrap-table.min.css">
        
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        
        <script src="/bower/jquery/dist/jquery.min.js"></script>
        
        <script src="/bower/bootstrap-table/dist/bootstrap-table.min.js"></script>
        
        <script src="/bower/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
      </body>
    </html>

具体什么文件是做什么的已在代码的注释中写的比较详细了，就不一一阐述了，如有不明白的可以通过评论来问我。

此时打开页面，F12查看引入的外部文件是否加载成功，如果有问题，检查一下自己的外部文件路径是否正确。

# 三、通过HTML的方法来使用BS-table #

# #

## 3.1 创建一个基础的BS-table ##

BS-table官网中也有给出这样的例子，就不再赘述，直接看代码就能知道个大概。

这是最基础的一个BS-table的代码，其中需要注意的是<thead>中每一行都有一个data-field属性（在<tbody>中是不需要的），这个属性相当于规定了这一列的id，之后BS-table获取来的数据就会根据我们给出的这个data-field进行一一对应的填表。运行一下，看看我们的BS-table样式。如下图3-1所示。

![70][] 图3-1 最基础的BS-table样式

## 3.2 为BS-table添加相应的功能 ##

### 3.2.1 添加一个搜索框 ###

BS-table中已经给我们设置了搜索框功能了，我们只需要在相应设置中将其开启即可。HTML写法的话，就是在<table>标签中添加一个data-search="true"属性即可。在不写该属性时，默认的是data-search="false"。

此时，我们的table代码应如下所示。

<table data-toggle="table" data-search="true">
          <thead>
            <tr>
              <th data-field="id">学号</th>
              <th data-field="name">姓名</th>
              <th data-field="math">数学</th>
              <th data-field="chinese">语文</th>
              <th data-field="english">英语</th>
              <th data-field="biology">生物</th>
              <th data-field="physics">物理</th>
              <th data-field="chemistry">化学</th>
              <th data-field="politics">政治</th>
              <th data-field="geography">地理</th>
              <th data-field="history">历史</th>
            </tr>
          </thead>
        </table>

此时，刷新页面，将会看到在表格右上方多出了一个搜索框。如图3-2所示。

![70 1][] 图 3-2

注意，这里BS-table给出的搜索框仅限于对表中已有的数据进行搜索，并不具备向服务器发起请求获取数据功能（可能是我对BS-table了解的太少，没发现有这个功能）

### 3.2.2 搜索框相关设置 ###

*  搜索框位置

使用“data-search-align”属性设置搜索框的位置。目前我所知的值可以填“left”和“right”，其余值都将把搜索框设置为与table等宽（width:100%）。默认值为“right”。使用如下：

<table data-toggle="table" data-search="true" data-search-align="left">
          <thead>
            <tr>
              <th data-field="id">学号</th>
              <th data-field="name">姓名</th>
              <th data-field="math">数学</th>
              <th data-field="chinese">语文</th>
              <th data-field="english">英语</th>
              <th data-field="biology">生物</th>
              <th data-field="physics">物理</th>
              <th data-field="chemistry">化学</th>
              <th data-field="politics">政治</th>
              <th data-field="geography">地理</th>
              <th data-field="history">历史</th>
            </tr>
          </thead>
        </table>

显示效果如图3-3所示。

![70 2][] 图 3-3

这里data-search-align属性并没有“center”值，如果设置为“left”或“right”之外的值，则搜索框会变为与table等宽的样式。如图3-4。

![70 3][] 图3-4

*  搜索框按键触发

BS-table 的搜索框默认的是当你输入内容后自动进行搜索，类似监听搜索框的onchange事件再加一个setInterval进行搜索。设置搜索框按键触发是使用data-search-on-enter-key属性，默认是data-search-on-enter-key="false"，即输入内容自动进行搜索。将data-search-on-enter-key设置为true（data-search-on-enter-key="true"）后，搜索框将会在你按下Enter（回车）键之后进行搜索。（这里截图也展示不了相关的效果，大家就自行尝试吧）。相关代码如下：

<table data-toggle="table" data-search="true" data-search-on-enter-key="true">
          <thead>
            <tr>
              <th data-field="id">学号</th>
              <th data-field="name">姓名</th>
              <th data-field="math">数学</th>
              <th data-field="chinese">语文</th>
              <th data-field="english">英语</th>
              <th data-field="biology">生物</th>
              <th data-field="physics">物理</th>
              <th data-field="chemistry">化学</th>
              <th data-field="politics">政治</th>
              <th data-field="geography">地理</th>
              <th data-field="history">历史</th>
            </tr>
          </thead>
        </table>

*  精确 / 模糊搜索

BS-table中使用data-strict-search来对精确搜索进行设置，默认的设置是data-strict-search="false"，即不开启精确搜索。不开启精确搜索时，搜索将会是模糊搜索，例如表中有三个人“张三”、“李四”、“赵老五”，当我们输入“赵老”时，依然会将“赵老五”列入搜索结果中。如下图3-5所示。

![70 4][] 图3-5 模糊搜索

如果将data-strict-search设置为true（data-strict-search="true"）则开启精确搜索。此时我们再搜索“赵老”，将不会把“赵老五”列入搜索结果中。如图3-6所示。

![70 5][] 图3-6 精确搜索

*  默认搜索字符串

设置搜索框默认搜索字符串使用data-search-text属性，例如我把搜索框的默认字符串设置为"赵老五"（data-search-text="赵老五"），那么当我载入BS-table后搜索框将自动填充“赵老五”，并且对该内容进行搜索，即我们可以使用该属性设置BS-table初始的搜索内容（并显示）。下图即是我们刚载入BS-table后的界面。可以看到此时BS-table已经对搜索框的内容“赵老五”进行了搜索。

![70 6][] 图3-7 搜索框默认搜索字符串

设置搜索框默认搜索字符串相关代码如下：

<table data-toggle="table" data-search="true" data-search-on-enter-key="true" 
        data-search-text="赵老五"
        data-url="/data.json" >
          <thead>
            <tr>
              <th data-field="id">学号</th>
              <th data-field="name">姓名</th>
              <th data-field="math">数学</th>
              <th data-field="chinese">语文</th>
              <th data-field="english">英语</th>
              <th data-field="biology">生物</th>
              <th data-field="physics">物理</th>
              <th data-field="chemistry">化学</th>
              <th data-field="politics">政治</th>
              <th data-field="geography">地理</th>
              <th data-field="history">历史</th>
            </tr>
          </thead>
        </table>

*  搜索超时

为了防止搜索时长过长从而导致“锁表”，我们可以设置搜索超时属性，data-search-time-out属性即是设置搜索超时，默认的值为500，即超过0.5s则视为搜索超时，这里是以毫秒为单位的。（因为条件有限，这里对该属性就不进行测试了，我也没有遇到相关的情况，具体的设置还是以官方文档为主）。

## 3.2 给BS-table获取数据 ##

现在表格样式大致是可以了，接下来说说表格最重要的东西了——获取数据，按照之前做HTML+jQuery的思路，<table>获取数据大致思路为以下两种：

1）直接在HTML中使用<tr><td></td></tr>写死，但是如果遇到从后端获取数据就没办法了。

2）使用ajax获取数据，然后DOM操作给<table>加上数据，最常用的方法了，异步加载数据，能从后端获取数据

这里使用BS-table你会发现在加载完BS-table后table的结构远远不止一个<table>那么简单，想用ajax强行加上去，我不敢说这么做不行（反正我是没敢这么做），但是这种方法绝对是劳民伤财的方法。

BS-table中已经有了对应的从后台获取数据的方法了，HTML写法中，添加两个属性即可：

1）data-method

2）data-url

和我们写ajax一个道理，总要有一个url和method对吧。talk is cheap,show me the code。

下面是获取后台数据的相关代码

<index.html>

上面代码，data-method="post"是使用post方法对数据进行获取（可以理解为ajax的post方法），data-url="/getData"从/getData这个路由获取数据。接下来我也把后端代码贴出来，加深对数据获取的理解。

<服务器端>

// 定义组数据（这里数据写死了，可以根据自己需要来获取数据库中的数据）
    const tableData = [
        {
            "id": "1111",
            "name": "张三",
            "math": "98",
            "chinese": "10",
            "english": "80",
            "biology": "20",
            "physics": "23",
            "chemistry": "100",
            "politics": "9",
            "geography": "5",
            "history": "25"
        },
        {
            "id": "1112",
            "name": "李四",
            "math": "10",
            "chinese": "80",
            "english": "60",
            "biology": "100",
            "physics": "70",
            "chemistry": "50",
            "politics": "50",
            "geography": "33",
            "history": "25"
        },
        {
            "id": "1113",
            "name": "赵老五",
            "math": "60",
            "chinese": "60",
            "english": "60",
            "biology": "60",
            "physics": "60",
            "chemistry": "60",
            "politics": "60",
            "geography": "60",
            "history": "60"
        }
    ]
    // 路由设置
    router.post('/getData', function (req, res) {
        // 返回数据
        res.send(tableData);
    })

这样就完成了从服务器获取数据的整套流程（当然，服务器端从数据库获取数据的那些代码就不用我再写了吧，和这个也没多大关系了），写服务器端代码主要是让大家了解一下数据再服务器端是以什么样的格式返回回来的（当时研究这个服务器端格式也让我掉了挺多头发了，我这里给大家省省头发）。

就这样BS-table的大致从获取数据到表格渲染数据的流程就完成了。最后结果如图3-7所示。

![70 7][] 图  3-7

# 写在最后 #

至此，BS-table的HTML写法大体说完了，后面我再慢慢跟新JS写法了，可能BS-table的其他样式方面的东西讲的比较少达不到各种各样的需求，我下来再充分准备准备继续更新。因为不属于官方文档，本论文肯定会有写得不谨慎的地方，还请大家多多指出，若大家有什么相关的需求可以评论留言，我会尽量满足大家的需求。

参考资料：

[Bootstrap-table API中文版][Bootstrap-table API]

[https_gitee.com_fd214333890_jquery_3.3.1]: https://gitee.com/fd214333890/jquery_3.3.1
[https_gitee.com_fd214333890_Bootstrap_4.1.1]: https://gitee.com/fd214333890/Bootstrap_4.1.1
[https_gitee.com_fd214333890_Bootstrap_table_1.12.1]: https://gitee.com/fd214333890/Bootstrap_table_1.12.1
[70]: /images/20220520/d53ac34672384088bdd78206f61e26ad.png
[70 1]: /images/20220520/58b4cf7cd4474b1cbbd09f72f9b54e1c.png
[70 2]: /images/20220520/3ba8ea6a7a964599b6c8b0bc38bda91d.png
[70 3]: /images/20220520/b4dc62165b1e424da69ecd13aa02d281.png
[70 4]: /images/20220520/30a027c720cf4e54a02ec8e14e5a60f4.png
[70 5]: /images/20220520/8d73875d5d2c449c98280242bba6bb86.png
[70 6]: /images/20220520/e4c2f763abd64c919412d6f840ec9f9e.png
[70 7]: /images/20220520/5c76e9e8d19841219f075bcdbe6e6b06.png
[Bootstrap-table API]: https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1