方法一 通过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. 使用ycsb对hbase1.4.9 benchmark

    Ycsb下载地址:https://github.com/brianfrankcooper/YCSB/releases 目前测试hbase1.4.9,因此下载ycsb-hbase14-binding-0 ...

  2. python--装饰器2--理解

    一.装饰无参函数①.原函数target为无参函数②.装饰函数的内置函数也必须要是无参函数③.运行原理相当于:target()=decorator(target)()---->最后的()相当于执行 ...

  3. Codeforces 781C Underground Lab 构造

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF781C.html 题目传送门 - CF781C 题意 给定一个 n 个点 m 条边的无向连通图,请你用 k ...

  4. HDU1814 Peaceful Commission 2-sat

    原文链接http://www.cnblogs.com/zhouzhendong/p/8099115.html 题目传送门 - HDU1814 题面 Description 根据宪法,Byteland民 ...

  5. unity打成aar上传到maven库的工具

    需求: 把unity打成aar并上传到maven库 其实就是把前两个博客整合了一下 unity打aar包工具 aar上传maven库工具 这里先说eclipse版的 package com.jinke ...

  6. UVA 796 Critical Links(模板题)(无向图求桥)

    <题目链接> 题目大意: 无向连通图求桥,并将桥按顺序输出. 解题分析: 无向图求桥的模板题,下面用了kuangbin的模板. #include <cstdio> #inclu ...

  7. 【Spring Boot】使用JDBC 获取相关的数据

    使用JDBC 获取相关的数据 什么是JDBC Java Database Connectivity 是一种用于执行SQL语句的Java API,与数据库建立连接.发送 操作数据库的语句并处理结果. S ...

  8. JVM 调优-给你的java应用看看病

    目录 java 应用 1 cpu 负载过高 1.1 分析问题 1.2 解决方案 2 内存占用过多 2.1 从内存回收方面 2.2 从代码层面 java 应用 1 cpu 负载过高 1.1 分析问题 首 ...

  9. linux 学习笔记 防火墙设置

    1> 重新设置启动防火墙命令 #service iptables restart 2>添加防火墙规则命令 2.1 #service iptables stop 停止防火墙 2.2 #vi ...

  10. sql语句1——join

    注:一下内容来自于http://www.w3school.com.cn/sql/ 1. 引用两个表 我们可以通过引用两个表的方式,从两个表中获取数据: 谁订购了产品,并且他们订购了什么产品? sele ...