基于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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
Vue制作Todo List网页
Apr 26 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
详解TypeScript中的类型保护
Apr 29 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
PHP 字符串操作入门教程
2006/12/06 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
JavaScript字符串对象
2017/01/14 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Python学习之用pygal画世界地图实例
2017/12/07 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python识别验证码的实现示例
2020/09/30 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
廉政文化进校园广播稿
2014/10/20 职场文书
2014教师年度工作总结
2014/11/10 职场文书
社区活动总结
2015/02/04 职场文书
公路施工安全责任书
2015/05/08 职场文书
山楂树之恋观后感
2015/06/11 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
如何在Python中妥善使用进度条详解
2022/04/05 Python