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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
如何将JavaScript将数组转为树形结构
Jun 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
新浪新闻小偷
2006/10/09 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
javascript按位非运算符的使用方法
2013/11/14 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
python二分法实现实例
2013/11/21 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python爬虫基础知识点整理
2020/06/02 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
大四学生思想汇报
2014/01/13 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
建筑安全生产责任书
2014/07/22 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
农村结婚典礼主持词
2015/06/29 职场文书