基于Bootstrap table组件实现多层表头的实例代码


Posted in Javascript onSeptember 07, 2017

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

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

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

0.效果图

基于Bootstrap table组件实现多层表头的实例代码

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>

总结

以上所述是小编给大家介绍的Bootstrap table实现多层表头的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 #Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 #Javascript
JS实现闭包中的沙箱模式示例
Sep 07 #Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 #Javascript
详解vue-cli构建项目反向代理配置
Sep 07 #Javascript
vue数字类型过滤器的示例代码
Sep 07 #Javascript
vue监听scroll的坑的解决方法
Sep 07 #Javascript
You might like
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
php生成word并下载代码实例
2019/03/15 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
Javascript 解疑
2009/11/11 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
script标签属性用type还是language
2015/01/21 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Python 文件操作实现代码
2009/10/07 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python add_argument()用法解析
2020/01/29 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
优秀毕业生推荐信范文
2014/03/07 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
销售辞职信范文
2015/03/02 职场文书
作息时间调整通知
2015/04/22 职场文书
健康证明
2015/06/19 职场文书
公司联欢会主持词
2015/07/04 职场文书
高效课堂教学反思
2016/02/24 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
搭建Yolov5服务器
2022/04/30 Servers