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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
javascript截取字符串小结
Apr 28 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
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
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
详解JS函数重载
2014/12/04 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python语言描述连续子数组的最大和
2018/01/04 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python如何定义接口和抽象类
2020/07/28 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
行政办公室岗位职责
2014/03/18 职场文书
酒店开业策划方案
2014/06/02 职场文书
学生实习证明范文
2014/09/28 职场文书
综治工作汇报材料
2014/10/27 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
Python集合set()使用的方法详解
2022/03/18 Python