bootstrap-table组合表头

1、效果图

2、html代码

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

3、javascript代码

 1 $("#table").bootstrapTable({
 2             dataType: "json",
 3             method: ‘get‘,
 4             contentType: "application/x-www-form-urlencoded",
 5             cache: false,
 6             url:"../data/mergeData.json",
 7             columns:[
 8
 9                 [
10                     {
11                         "title": "洗衣机统计表",
12                         "halign":"center",
13                         "align":"center",
14                         "colspan": 5
15                     }
16                 ],
17                 [
18                     {
19                         field: ‘name‘,
20                         title: "功能分组",
21                         valign:"middle",
22                         align:"center",
23                         colspan: 1,
24                         rowspan: 2
25                     },
26                     {
27                         title: "美的",
28                         valign:"middle",
29                         align:"center",
30                         colspan: 2,
31                         rowspan: 1
32                     },
33                     {
34                         title: "松下",
35                         valign:"middle",
36                         align:"center",
37                         colspan: 2,
38                         rowspan: 1
39                     }
40                 ],
41                 [
42                     {
43                         field: ‘mideaNum‘,
44                         title: ‘数量‘,
45                         valign:"middle",
46                         align:"center"
47                     },
48                     {
49                         field: ‘mideaPercent‘,
50                         title: ‘占比‘,
51                         valign:"middle",
52                         align:"center"
53                     },
54                     {
55                         field: ‘panasonicNum‘,
56                         title: ‘数量‘,
57                         valign:"middle",
58                         align:"center"
59                     },
60                     {
61                         field: ‘panasonicPercent‘,
62                         title: ‘占比‘,
63                         valign:"middle",
64                         align:"center"
65                     }
66                 ]
67             ]
68         })

columns中存放三组数组:

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

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

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

4、mergeData.json

1 [
2     {"name":"滚筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},
3     {"name":"波轮","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
4 ]
时间: 2024-10-27 00:10:06

bootstrap-table组合表头的相关文章

毕设问题(1)表格table的表头自定义、复合表头,组合表格

毕业设计,是一个web项目,遇到的些问题,记录下来.也许也有同样只知道一些,不是那么系统的学过的人,会遇到同样的问题,希望有所帮助. 百度知道有这样一个问题: bootstrap table 如何实现自定义表头?如图. 通常我们只看到是普通的二维表,但是有时候会有如上图的组合表头情况,这里需要使用th的两个可选属性rowspan和colspan分别是用来修改单元格的竖着和横着占的大小,实现上面的效果需要设置两行tr的thead,1,2,4的<th rowsapn="2">&

bootstrap table 实现固定悬浮table 表头并可以水平滚动

在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚动 html code(source table): <table id="top_fix_table" border="0" cellpadding="4" cellspacing="0" class="tabl

bootstrap table 服务端分页

前端js $(function () { //$('#MDTable').bootstrapTable('destroy'); $("#MDTable").bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器数据,初始化表格的内容Destroy the bootstrap table. toolbar: '#toolbar', //工具按钮用哪个容器 method: 'get', url: "/MD_All/MD_Data",

JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

原文:JS组件系列--表格组件神器:bootstrap table(二:父子表和行列调序) 前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器

bootstrap table实现iview固定列的效果

因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列,中间内容可以横向拖动</title> <link rel="stylesheet" hr

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

Bootstrap Table Fixed Columns

最近在使用BootStrap 做项目前端,自然也用到了  Bootstrap Table. 推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/  网站看看,上面有很详细的介绍以及其他扩展功能 下面写下 Fixed Columns(固定列)的使用方法.附件下载地址:http://pan.baidu.com/s/1kUEQTPt 1.引用css文件,js文件(注意引用顺序) <link rel="stylesheet" hre

html5 jquery bootstrap table 直接使用

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-w

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

Bootstrap table

Bootstrap table: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> </head> <