bootstrap-table组合表头的实现方法


Posted in Javascript onSeptember 07, 2017

最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家,

 1、效果图

bootstrap-table组合表头的实现方法

2、html代码

<table id="table"></table>

3、javascript代码

$("#table").bootstrapTable({
      dataType: "json",
      method: 'get',
      contentType: "application/x-www-form-urlencoded",
      cache: false,
      url:"../data/mergeData.json",
      columns:[

        [
          {
            "title": "洗衣机统计表",
            "halign":"center",
            "align":"center",
            "colspan": 5
          }
        ],
        [
          {
            field: 'name',
            title: "功能分组",
            valign:"middle",
            align:"center",
            colspan: 1,
            rowspan: 2
          },
          {
            title: "美的",
            valign:"middle",
            align:"center",
            colspan: 2,
            rowspan: 1
          },
          {
            title: "松下",
            valign:"middle",
            align:"center",
            colspan: 2,
            rowspan: 1
          }
        ],
        [
          {
            field: 'mideaNum',
            title: '数量',
            valign:"middle",
            align:"center"
          },
          {
            field: 'mideaPercent',
            title: '占比',
            valign:"middle",
            align:"center"
          },
          {
            field: 'panasonicNum',
            title: '数量',
            valign:"middle",
            align:"center"
          },
          {
            field: 'panasonicPercent',
            title: '占比',
            valign:"middle",
            align:"center"
          }
        ]
      ]
    })

columns中存放三组数组:

第一组数组存放的是表的标题信息,其中的colspan为整个表所有的列数

第二组存放的是表中第二行标题,其中field为name的字段是对应的跨行字段,该字段与mergeData.json中的name相对应,colspan与rowspan是该字段所占的列数与行数,其它字段与之类似

第三组存放的是表中的第三行标题,与mergeData.json中的数据相对应

4、mergeData.json

[
   {"name":"滚筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},
   {"name":"波轮","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
 ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
jQuery 解析xml文件
Aug 09 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript事件冒泡实例分析
May 13 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
BootStrap的两种模态框方式
May 10 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 #Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 #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
You might like
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP程序员编程注意事项
2008/04/10 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
社会实践心得体会
2014/01/03 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
学生党员公开承诺书
2014/05/28 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
碧霞祠导游词
2015/02/09 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android