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中使 ...
随机推荐
- Loadbalancer
LoadBalancer 可以将来自客户端的请求分发到不同的服务器,通过将一系列的请求转发到不同的服务器可以提高服务器的性能,并可以自动地寻找最优的服务器转发请求,这样不仅提高了系统性能,同时达到了负 ...
- 获取本地的ip,地址,code
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AtCoder Grand Contest 017D (AGC017D) Game on Tree 博弈
原文链接https://www.cnblogs.com/zhouzhendong/p/AGC017D.html 题目传送门 - AGC017D 题意 给定一棵 n 个节点的以节点 1 为根的树. 两个 ...
- BZOJ1433 [ZJOI2009]假期的宿舍 二分图匹配 匈牙利算法
原文链接http://www.cnblogs.com/zhouzhendong/p/8372785.html 题目传送门 - BZOJ1433 题解 我们理一理题目. 在校的学生,有自己的床,还可以睡 ...
- .net core webapi 将localhost改成ip地址
用管理员身份运行vs 添加引用 using Microsoft.AspNetCore.Cors; 修改 public void Configure(IApplicationBuilder app, I ...
- sqlldr的使用
1,在公司进行预处理的时候,发现文件不能入库,而公司前辈使用的是sqlldr的技术将解析后的文件入库,前辈在测试的时候使用的是本机上的数据库(见图一),没有使用完整的远程连接oracle的正确方式,所 ...
- 第一章:python基础语法| 字符编码| 条件语句...
1.编程语言介绍 编程就是写代码,让计算机帮你做事情.计算机底层是电路,只认识二进制0和1.机器语言&汇编语言语言进化历史:机器.汇编.高级.机器语言只接受二进制代码:汇编语言是采用英文缩写的 ...
- html-模仿小米首页定位案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- webstorm 2017 激活破解方法大全
webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/4/8)v3.3 注册时,在打开的License ...
- 机器学习实战笔记-k-近邻算法
机器学习实战笔记-k-近邻算法 目录 1. k-近邻算法概述 2. 示例:使用k-近邻算法改进约会网站的配对效果 3. 示例:手写识别系统 4. 小结 本章介绍了<机器学习实战>这本书中的 ...