功能说明 --暂时是个demo 数据需要自行处理
1.竖向统计统计使用bootstrap-table自带的footerFormatter函数2.横向同级统计使用bootstrap-table 列属性 formatter3.单元格合并4.点击单元格获取后台数据并展示5.获取最终数据
代码部分
<!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="/bootstrap-table@1.14.2/dist/bootstrap-table.min.css"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script><script src="/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;}})// 更新rowDatamsg02.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>
最终效果
