方法一 通过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. 获取本地的ip,地址,code

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Java基础总结01:JDK与JRE概述

    1)JRE(Java Runtime Environment,Java运行时环境) 包括Java虚拟机(JVM Java Virtual Machine)和Java程序所需的核心类库等,如果想要运行一 ...

  3. 分布式服务框架XXL-RPC

    <分布式服务框架XXL-RPC>      一.简介 1.1 概述 XXL-RPC 是一个分布式服务框架,提供稳定高性能的RPC远程服务调用功能.拥有"高性能.分布式.注册中心. ...

  4. 我与Vuex的第一次邂逅

    new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</d ...

  5. spring注解工具类AnnotatedElementUtils和AnnotationUtils

    一.前言 spring为开发人员提供了两个搜索注解的工具类,分别是AnnotatedElementUtils和AnnotationUtils.在使用的时候,总是傻傻分不清,什么情况下使用哪一个.于是我 ...

  6. suctf逆向部分

    自己真的菜,然后在网上找了一篇分析pyc反编译后的文件然后进行手撸opcode,过程真痛苦 http://www.wooy0ung.me/writeup/2017/10/11/0ctf-quals-2 ...

  7. Standford CoreNLP使用

    1.官网https://stanfordnlp.github.io/CoreNLP/ 2. 待续...

  8. DFS 算法总结

    DFS 算法总结 这篇文章会对DFS进行一个总结,列举的题目则是从LeetCode上面选的: 适用场景: 有三个方面,分别是输入数据.状态转换图.求解目标: 输入数据:如果是递归数据结构,如单链表,二 ...

  9. 2602 ACM 杭电 骨头容器 01背包

    题意:装骨头的容器大小固定,有一堆骨头,已知骨头的价值和大小,在不超过容积大小的情况下,问:所装骨头的最大价值? 思路:典型的01背包问题,不需要有任何的变动. 模板: for(int j=v;j&g ...

  10. ThinkPHP CI codeignitor 框架 apache 重写 url 隐藏index.php 服务器 报错:Object not found! 可能是.htaccess隐藏index.php

    隐藏index.php可以去掉URL地址里面的入口文件index.php,但是需要额外配置WEB服务器的重写规则.以Apache为例,需要在入口文件的同级添加.htaccess文件(官方默认自带了该文 ...