动态添加列、动态添加行、单元格点击横向、竖向统计 · PHP笔记

``` <body> <table id="table"></table> <a rel="nofollow" href="javascript:;" class="btn btn-primary" id="addRow">addRow</a> <a rel="nofollow" href="javascript:;" class="btn btn-primary" id="addColumn">addClumn</a> <a rel="nofollow" href="javascript:;" class="btn btn-primary" id="getData">getData</a> </body> <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> ``` ![](https://img.kancloud.cn/0c/18/0c18f133acd2d13e807284166eb9b923_851x410.png)