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

原创 2017年09月07日 10:31:00

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

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

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

0.效果图

这里写图片描述

1.实现方法

<html>
<head>
<title>多层表头</title>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<style type="text/css">

.table td, .table th {
    font-style: normal;
    font-weight: normal;
    text-align:center;
}

.bootstrap-table {
    width: 100%;
}
</style>
</head>
<body>
    <table data-toggle="table">
        <thead>
            <tr>
                <th data-colspan="1">妻子</th>
                <th data-colspan="2">车子</th>
                <th data-colspan="3">房子</th>
                <th data-rowspan="2">总价值</th>
            </tr>
            <tr>
                <th>唯一</th>
                <th>Mini</th>
                <th>Smart</th>
                <th>90平</th>
                <th>149平</th>
                <th>别墅</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>30万</td>
                <td>20万</td>
                <td>60万</td>
                <td>100万</td>
                <td>看着办</td>
                <td>∞∞</td>
            </tr>
        </tbody>
    </table>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
</body>
</html>

2.具体步骤

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

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

第二步,第一层表头;

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

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

第三步,第二层表头;

<tr>
    <th>唯一</th>
    <th>Mini</th>
    <th>Smart</th>
    <th>90平</th>
    <th>149平</th>
    <th>别墅</th>
</tr>

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

第三步,启用bootstrap-table。

<table data-toggle="table">

</table>

嗯,不需要解释了。


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

版权声明:本文出自沉默王二的博客,转载必须注明出处。技术交流群 120926808

bootstrap 表头组合

第一种方案:                                 行政区             小区名称             父小区                 业务信息锁...
  • ling1234ling1234
  • ling1234ling1234
  • 2017年06月15日 11:32
  • 1624

BootstrapTable 插件合并单元格

BootstrapTable 插件合并单元格客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果JavaScript代码声明mergeCells函数...
  • jingtianyiyi
  • jingtianyiyi
  • 2017年07月27日 16:49
  • 5960

bootstrap的table插件动态加载表头【表头】。

bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫每个列表加载的数据需求不同,所以需要动态的更换表头。 网上有很多加载表格数据的例子,但是却没有找到如何动态加载表格,再加在数据。 ...
  • Abubu123
  • Abubu123
  • 2017年09月22日 10:38
  • 3695

bootstrap-table组合表头

bootstrap-table组合表头 1、效果图 回到顶部 2、html代码  1   回到顶部 3、javascript代码 1...
  • princeLuan
  • princeLuan
  • 2017年04月09日 00:17
  • 1639

bootstrap-table出现多个表头问题解决

今天做测试小项目的时候还是用bootstrap-tale,因为前端美化用bootstrap,所以感觉使用这个会好一点,但是好像用别的人比较多一点?求推荐。 今天使用的时候发现bootstrap-ta...
  • linlinxie
  • linlinxie
  • 2017年09月13日 10:05
  • 1921

bootstrap表格固定表头并且tbody部分添加滚动条

  • 2017年10月24日 16:32
  • 125KB
  • 下载

Bootstrap Table使用整理(五)-分页组合查询

一、分页组合查询 /* * data-pagination 指定是否启用分页 * data-page-list 指定分页的页数据量数组 '[5,10]' * data-side-pagination...
  • u011127019
  • u011127019
  • 2017年06月08日 18:52
  • 2884

基于Bootstrap的多级表格实现

在JS中,借助于Bootstrap,我们可以高效地绘制表格。但实际应用中,需要的表格功能更能往往更为复杂,需要在Bootstrap表格类的基础上进行二次开发。  本文实现的主要是一个三级表格的开发,如...
  • sgzhm_casco
  • sgzhm_casco
  • 2017年06月02日 17:08
  • 1183

设计表头固定并且列宽可调整的Table表格

表头固定 我们都知道HTML中table的thead是会随着tbody滚动的。所以要实现tbody内容滚动,而表头固定就需要用两个table来显示,一个显示只用于表头,另一个用于显示tbody内容。 ...
  • gemuandyou
  • gemuandyou
  • 2016年01月21日 19:47
  • 2835

bootstrap-table 表头数据展示错位

打开bootstrap-table.js 找到 BootstrapTable.prototype.resetView方法,找到如下代码 if (this.options.showHeader...
  • zhangzhida163
  • zhangzhida163
  • 2017年03月31日 18:09
  • 3420
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap-table:轻松实现多层表头
举报原因:
原因补充:

(最多只允许输入30个字)