方法一 通过mergeCells方法

演示地址:http://issues.wenzhixin.net.cn/bootstrap-table/methods/mergeCells.html

Merge some cells to one cell, the options contains following properties:
index: the row index.
field: the field name.
rowspan: the rowspan count to be merged.
colspan: the colspan count to be merged.
$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});

功能描述:合并单元格

方法一 通过columns参数中存放数组的形式

例:

$("#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"
}
]
]
})

bootstrap-table方法之:合并单元格的更多相关文章

  1. layui table+复杂表头+合并单元格

    效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  2. 【Javascript】Javascript横向/纵向合并单元格TD

    > 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1     JOB TO ...

  3. Java导出Excel表,POI 实现合并单元格以及列自适应宽度(转载)

    POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...

  4. POI 实现合并单元格以及列自适应宽度

    POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...

  5. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  6. vue中 表头th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...

  7. react antd Table动态合并单元格

    示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...

  8. vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...

  9. element-ui table 最后一行合计,单元格合并

    接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...

随机推荐

  1. Calendar抽象类的使用

    Calendar timeNow = Calendar.getInstance(); int year = timeNow.get(Calendar.YEAR); // 这里月是从0开始的,即0到11 ...

  2. Python编译安装遇到的问题

    1.python在make时候报错 Python build finished, but the necessary bits to build these modules were not foun ...

  3. gradle修改apk包名和apk文件名

    需求1:根据渠道不同给包名添加不同的后缀名 方案: //先定义默认包名,用来复用 def packageName = "xxx.xxxx.xxxx" defaultConfig { ...

  4. 四、Python导入自己写的包报错:没有该包如何解决

    场景:当你运行文件时,提示没有你想要导入的这个包,这是只需在你运行文件的开头添加俩行代码: import sys sys.path.apprnd('../') 原理:请看图解 另外解释下sys.pat ...

  5. POJ 3090 Visible Lattice Points 【欧拉函数】

    <题目链接> 题目大意: 给出范围为(0, 0)到(n, n)的整点,你站在(0,0)处,问能够看见几个点. 解题分析:很明显,因为 N (1 ≤ N ≤ 1000) ,所以无论 N 为多 ...

  6. 从零搭建 ES 搜索服务(六)相关性排序优化

    一.前言 上篇介绍了搜索结果高亮的实现方法,本篇主要介绍搜索结果相关性排序优化. 二.相关概念 2.1 排序 默认情况下,返回结果是按照「相关性」进行排序的--最相关的文档排在最前. 2.1.1 相关 ...

  7. JVM之基本结构

    1. Java虚拟机的架构 1.1 Java的NIO库允许Java程序使用直接内存,访问直接内存的速度优于Java堆.出于性能的考虑,读写频繁的场合会考虑使用直接内存. 1.2 本地方法栈和Java栈 ...

  8. Linux学习笔记10

    创建文件 touch touch filenames 创建文件夹 mkdir mkdir dir3 dir4 dir5 建立多个文件夹 mkdir ~/games  在登录用户的本目录之下建立game ...

  9. easyui中对数据的判断来显示,formatter控制

    需求效果图:(把编辑按钮根据信息是否发布,来选择显示与不显示,已发布的不能够进行编辑所以不显示) 上图中的flag为发布标识,flag值1为已发布,值2为未发布 思路:第一想到的是给这个button按 ...

  10. 关于如何在ElementUI中实现统计Table筛选结果数量

    在开发单位自己的系统时,领导提了这个需求,在看了ElementUI发现并没有实现这个功能. 遂向官方求解,得回复:自己在filter-method 中实现.于是便有了思路. 这里本人使用了一个比较暴力 ...