bootstrap-table方法之:合并单元格
方法一 通过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方法之:合并单元格的更多相关文章
- layui table+复杂表头+合并单元格
效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...
- 【Javascript】Javascript横向/纵向合并单元格TD
> 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1 JOB TO ...
- Java导出Excel表,POI 实现合并单元格以及列自适应宽度(转载)
POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...
- POI 实现合并单元格以及列自适应宽度
POI是apache提供的一个读写Excel文档的开源组件,在操作excel时常要合并单元格,合并单元格的方法是: sheet.addMergedRegion(new CellRangeAddress ...
- BootStrap Table 合并单元格
为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...
- vue中 表头th 合并单元格,且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
- element-ui table 最后一行合计,单元格合并
接着写两个方法--最后一行合计的方法 --单元格合并的方法 先写一个rowspan方法,计算出spanArr数组是怎么单元格合并的,注意rowspan方法要在渲染完成之前使用,可以在mounted中使 ...
随机推荐
- Calendar抽象类的使用
Calendar timeNow = Calendar.getInstance(); int year = timeNow.get(Calendar.YEAR); // 这里月是从0开始的,即0到11 ...
- Java中字符串比较的问题
package com.hxl; import java.util.Scanner; public class Test { public static void main(String[] args ...
- 047 SparkSQL自定义UDF函数
一:程序部分 1.需求 Double数据类型格式化,可以给定小数点位数 2.程序 package com.scala.it import org.apache.spark.{SparkConf, Sp ...
- day 55 jQuery-part2
这里有一个DOM对象转换成jQuery对象的方法,在jQuery对象后面加上索引值0即可得到效果如图所示: $("#btn")[0] 这里我们这里的索引值为0 只是一种写法而已,只 ...
- 基于Keil软件的MCU环境搭建
我们在开发一款新的MCU的时候,偶尔会遇到Keil软件没有对应的Device设备选型,以下,我们以STM32F407VGT6作为实例来演示整个环境的搭建过程: 一.如下所示,我需要选择的是ST公司的S ...
- 【JavaScript】jQuery
No1: jQuery能帮我们干这些事情: 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码: 简洁的操作DOM的方法:写$('#test')肯定比docume ...
- Codeforces 1076D Edge Deletion 【最短路+贪心】
<题目链接> 题目大意: n个点,m条边的无向图,现在需要删除一些边,使得剩下的边数不能超过K条.1点为起点,如果1到 i 点的最短距离与删除边之前的最短距离相同,则称 i 为 " ...
- webstorm离线装载Material Theme UI
首先说说需求,由于直接用webstorm听说VS挺火的,但是初恋的感觉是其他任何编辑器无法替代的 瞎说了一些话,新公司内网开发,用的是vscode,但是我还是喜欢用webstorm,连不上网,所以不能 ...
- 通过ipmitool找回遗忘的iDrac地址
Background: 在使用Dell服务器的过程中,如果发生一下情况:可以进入系统,但是忘记iDrac卡的地址,在系统的某个Linux下,可以使用ipmitool这个工具来get一下硬件的信息,从而 ...
- BZOJ.3293.[CQOI2011]分金币(思路)
3293 双倍经验 1045 先考虑能否断环为链.显然是可以的,因为金币不可能在整个环上平移.所以我们枚举断点\(k\),表示\(k\)和\(k+1\)之间不交换金币. 令\(d_i=a_i-aver ...