基于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 相关文章推荐
JavaScript用select实现日期控件
Jul 17 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
理解JS事件循环
Jan 07 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
详解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中接口与抽象类的区别
2013/06/08 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php使用正则验证中文
2016/04/06 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
canvas知识总结
2017/01/25 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
python抓取网页内容示例分享
2014/02/24 Python
django批量导入xml数据
2016/10/16 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
python 代码运行时间获取方式详解
2020/09/18 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
什么是Web Service?
2012/07/25 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
教师节获奖感言
2015/07/31 职场文书
护士心得体会范文
2016/01/25 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
Fluentd搭建日志收集服务
2022/09/23 Servers