Bootstrap-table：轻松实现多层表头

灰太狼 2021-05-10 11:18 731阅读 0赞

在做私活的时候，有一个需求是要在页面上实现多层表头。一开始有点懵，不知道怎么来实现，我回想起在JFTT的时候，曾用过Flex版的多层表头，不过那离现在已经很久远了，久远到Flex已经被淘汰出局了。于是在网上折腾了好一会儿，终于找到一款用起来简单，效果又很不错的组件——Bootstrap-table。

Bootstrap-table还有很多强大的功能，但这篇文章我们把关注点只放在多层表头上，关注点确定后，这篇博客就很简单了，但我觉得还是很有必要推而广之——因为之前在看董卿主持的《诗词大会》，里面有很多基础的知识，竟然有很多人都答不上来，搞得我一度很“嚣张”，对老婆夸下海口说我也能过第一轮，但事实是我过不了——我也不会写“碧玉妆成一树高，万条垂下绿丝绦（tao）”中的tao字。

所以，文章不在于其难度，而在于其意义——在月球上迈上一小步和在地球上迈上一小步差别就在于“这是个人迈出的一小步，但却是人类迈出的一大步。”

#0.效果图

这里写图片描述

#1.实现方法

  1. <html>
  2. <head>
  3. <title>多层表头</title>
  4. <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
  5. <style type="text/css"> .table td, .table th { font-style: normal; font-weight: normal; text-align:center; } .bootstrap-table { width: 100%; } </style>
  6. </head>
  7. <body>
  8.     <table data-toggle="table">
  9.         <thead>
  10.             <tr>
  11.                 <th data-colspan="1">妻子</th>
  12.                 <th data-colspan="2">车子</th>
  13.                 <th data-colspan="3">房子</th>
  14.                 <th data-rowspan="2">总价值</th>
  15.             </tr>
  16.             <tr>
  17.                 <th>唯一</th>
  18.                 <th>Mini</th>
  19.                 <th>Smart</th>
  20.                 <th>90平</th>
  21.                 <th>149平</th>
  22.                 <th>别墅</th>
  23.             </tr>
  24.         </thead>
  25.         <tbody>
  26.             <tr>
  27.                 <td>∞</td>
  28.                 <td>30万</td>
  29.                 <td>20万</td>
  30.                 <td>60万</td>
  31.                 <td>100万</td>
  32.                 <td>看着办</td>
  33.                 <td>∞∞</td>
  34.             </tr>
  35.         </tbody>
  36.     </table>
  37.     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  38.     <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
  39. </body>
  40. </html>

#2.具体步骤

第一步，通过CDN引入jquery和bootstrap-table。

  1. <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
  2. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  3. <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

第二步，第一层表头；

  1. <tr>
  2.     <th data-colspan="1">妻子</th>
  3.     <th data-colspan="2">车子</th>
  4.     <th data-colspan="3">房子</th>
  5.     <th data-rowspan="2">总价值</th>
  6. </tr>

通过data-colspan指定二级表头横向有多少个，纵向为1；
通过data-rowspan指定二级表头纵向有多少个，横向为1；

第三步，第二层表头；

  1. <tr>
  2.     <th>唯一</th>
  3.     <th>Mini</th>
  4.     <th>Smart</th>
  5.     <th>90平</th>
  6.     <th>149平</th>
  7.     <th>别墅</th>
  8. </tr>

注意data-rowspan=”2”对应的第二层表头就不需要指定了。

第三步，启用bootstrap-table。

  1. <table data-toggle="table">
  3. </table>

嗯，不需要解释了。

文章很简单，意义却大不同。

20190430093935456.jpg

发表评论

表情：
评论列表 （有 0 条评论，731人围观）

还没有评论，来说两句吧...

相关阅读

    相关 BootstrapTable冻结表头（一）

    BootstrapTable冻结表头，使用别人写的 JS，这种方法表头置顶后就不会动了。改正一个隐含的bug就是拉动滚定条时表头与数据列不对应。还有一种方法 Bootst...

    朱雀朱雀/ 0 赞/ 1181 阅读