脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap-table组合表头

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

 更新时间：2017年09月07日 14:36:32   作者：慵懒的小猪  
本篇文章主要介绍了bootstrap-table组合表头的实现方法，非常具有实用价值，需要的朋友可以参考下

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

 1、效果图

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%"}
 ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Highcharts使用简例及异步动态读取数据

    Highcharts使用简例及异步动态读取数据

    Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用，通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识，感兴趣的朋友一起学习吧
    2015-12-12
  • js事件委托和事件代理案例分享

    js事件委托和事件代理案例分享

    这篇文章主要为大家分享了js事件委托和事件代理案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • web项目开发之JS函数防抖与节流示例代码

    web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2021-09-09
  • uniapp如何实现tabBar之间传参

    uniapp如何实现tabBar之间传参

    这篇文章主要给大家介绍了关于uniapp如何实现tabBar之间传参的相关资料,文中通过代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • js事件监听器用法实例详解

    js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下
    2015-06-06
  • 微信小程序封装分享与分销功能过程解析

    微信小程序封装分享与分销功能过程解析

    这篇文章主要介绍了微信小程序封装分享与分销功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 浅析JavaScript回调函数应用

    浅析JavaScript回调函数应用

    这篇文章主要为大家详细介绍了JavaScript回调函数应用，感兴趣的朋友可以参考一下
    2016-05-05
  • 一文详解JavaScript中的URL和URLSearchParams

    一文详解JavaScript中的URL和URLSearchParams

    URL，称为统一资源定位器，指互联网上能找到资源定位的字符串，而URLSearchParams对象是专门用于处理url网址信息中的查询字符串，本文就来带大家深入了解一下二者的使用
    2023-05-05
  • JS异步堆栈追踪之为什么await胜过Promise

    JS异步堆栈追踪之为什么await胜过Promise

    与直接使用Promise相比，使用async/await不仅可以使代码更具可读性，而且还可以在JavaScript引擎中实现一些有趣的优化。这篇文章是关于一个这样的优化，涉及异步代码的堆栈追踪。
    2021-04-04
  • javascript 闭包详解

    javascript 闭包详解

    闭包：是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域，一般为了给某个函数申明一些只有该函数才能使用的局部变量时，我们就会用到闭包，我们来详细探讨下
    2015-07-07

最新评论