https://blog.csdn.net/we675398040/article/details/90668654<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
</head>
<body>
<table id="table"></table>
<a href="javascript:;" class="btn btn-primary" id="addRow">addRow</a>
<a href="javascript:;" class="btn btn-primary" id="addColumn">addClumn</a>
<a href="javascript:;" class="btn btn-primary" id="getData">getData</a>
</body>
</html>
<script>
</script>
<script type="text/javascript">
var id = 0;
var mergeArr = [0];
// 初始表格数据
var columns = [
[{
title: '场景',
field: 'pro',
align: 'center',
valign: 'middle',
rowspan: 2,
}, {
title: '场景细分',
align: 'center',
field: 'name',
valign: 'middle',
rowspan: 2
}, {
title: 'total',
align: 'center',
field: 'total',
valign: 'middle',
rowspan: 2,
formatter: function (value, row, index, field) {
var sum = 0;
for (var key in row) {
if (key != 'id' && key != 'pro' && key != 'name' && key != 'total') {
var num = row[key] == '-' ? 0 : Number(row[key]);
sum += num;
}
}
return sum;
}
}],
[]
];
// row数据
var rowData = [];
//column数据结构
var msg = {
t01: {title: '40城市',field: 'aa'},
t02: [{title: '2b场景',field: '2b'}, {title: '口碑场景', field: 'koubei'},{title: '综合热点',field: 'zonghe'}, { title: '其他',field: 'qita'}]
}
// row数据结构
var msg02 = [
{id: 0,pro: '乡镇',name: '发达乡镇',total: 0},
{id: 1,pro: '乡镇',name: '中等乡镇',total: 0},
{id: 2,pro: '乡镇',name: '其他乡镇',total: 0},
{id: 3, pro: '乡镇',name: '其他',total: 0}
]
$(function () {
$("#addRow").on("click", function () {
addRow(msg02)
})
$("#addColumn").on("click", function () {
addColumn(msg)
})
$("#getData").on("click", function () {
var data=$("#table").bootstrapTable('getData');
console.log(data);
})
// table初始化
$("#table").bootstrapTable({
data: rowData,
height: 460,
columns: columns,
showFooter:true,
onClickCell: function (field, value, row, element) {
if (field != 'pro' && field != 'name' && field != 'total') {
value = value == "-" ? parseInt(Math.random() * 100) : "-";
console.log(row);
$("#table").bootstrapTable('updateCell', {
index: row.id,
field: field,
value: value
})
_initMergeCell("#table", mergeArr)
}
}
})
})
// 新增列
function addColumn(obj) {
columns[0].splice(columns[0].length - 1, 0, {
title: obj['t01'].title,
colspan: obj['t02'].length,
align: 'center'
});
for (var i = 0; i < obj['t02'].length; i++) {
var item = obj['t02'][i];
columns[1].push({
title: item.title,
halign: 'center',
field: obj['t01'].field + "-" + item.field,
footerFormatter: function (data) {
var sum = 0;
var that = this;
$.each(data, function (index, item) {
var num = item[that.field] == '-' ? 0 : parseInt(item[that.field]);
sum += num;
})
return sum;
}
})
// 更新rowData
msg02.forEach(function (row, index) {
row[obj['t01'].field + '-' + item['field']] = '-';
})
}
$("#table").bootstrapTable('refreshOptions', {
columns: columns,
})
_initMergeCell("#table", mergeArr)
}
// 新增行
function addRow(obj) {
mergeArr.push({
index: mergeArr[0],
span: obj.length
})
msg02.forEach(function(row,index){
rowData.push(row);
})
console.log(rowData)
rowData.forEach(function(row,index){
row.id=index;
})
$("#table").bootstrapTable('refreshOptions', {
data: rowData,
});
mergeArr[0] += msg02.length;
_initMergeCell("#table", mergeArr)
}
/**
* id:表格id
* arr:需要合并的单元格数据 格式：[{id:0,rowspan:2},{id:2,rowspan:3},...]
**/
function _initMergeCell(id, arr) {
var colspan,rowspan;
for (var i = 1; i < arr.length; i++) {
var item = arr[i];
if(item.span==1){
colspan=2;
rowspan=1;
}else {
colspan=1;
rowspan=item['span']
}
$(id).bootstrapTable('mergeCells', {
index: item['index'],
field: 'pro',
rowspan: rowspan,
colspan:colspan
})
}
}
</script>来源：oschina
链接：https://my.oschina.net/u/4352701/blog/4279679