最近要做一个统计表格，主要是有两个问题
第一：列太多需要实现组合表头
第二：需要根据统计的纬度来动态的添加表格的列
先来看看效果吧：
组合表头效果
动态列效果，选择了服务和用户选项，表格里面会添加这两个列
下面说下如何实现，先说组合表头，我用的是ruoyi搭的框架，ruoyi表格用的bootstrap-table，所以可以相互借鉴。
初始化表格的js方法是这样，columns是一个数组，里面放的是表格的列信息
function initTable(columns){var options = {url: prefix + "/list",showSearch: false,showRefresh: false,showToggle: false,showColumns: false,columns: columns};$.table.init(options);}
组合表头和一般表头的区别就是，一般表头是一个一元数组，而组合表头是一个多元数组，简单的说，表头有几行，就是一个几元数组。
一般表头：
var header =[{title : '文件数量', field : 'fileNum'},{title : '文件大小', field : 'fileSize'}]
组合表头：
var finalColumns =[];var header1 = [{title : '上传', align : 'center', colspan : 6},{title : '下载', align : 'center', colspan : 6},{title : '总览', align : 'center', colspan : 6}]var header2=[{title : '文件数量', align : 'center', colspan: 3},{title : '文件大小', align : 'center', colspan: 3},{title : '文件数量', align : 'center', colspan: 3},{title : '文件大小', align : 'center', colspan: 3},{title : '文件数量', align : 'center', colspan: 3},{title : '文件大小', align : 'center', colspan: 3}]var header3=[{field : fileNum title : '文件数量'}.....]// 将组合表头push到一个数组中finalColumns.push(header1,header2,header3);var options = {url: prefix + "/list",showSearch: false,showRefresh: false,showToggle: false,showColumns: false,columns: finalColumns};$.table.init(options);
这样就可以通过多元数组实现组合表头，但是还有个关键一定要根据自己的表格情况合理的设置 rowspan和colspan 这两个属性
再来说说表格动态列
这个其实也比较简单，就是在加载表格之前，请求后台，获取动态列的数据，再初始化表格就行了
直接贴代码：
js中请求动态列
function ajaxColumns() {var url = prefix + "/ajaxColumns";var dataParam = {"columns":getColumns()}$.modal.loading("正在查询中，请稍后...");$.post(url, dataParam, function(result) {if (result.code == web_status.SUCCESS) {setColumns(result.data.dynamicList,result.data.nomalList);} else if (result.code == web_status.WARNING) {$.modal.alertWarning(result.msg)} else {$.modal.alertError(result.msg);}$.modal.closeLoading();});}
@PostMapping("/ajaxColumns")@ResponseBodypublic AjaxResult ajaxColumns(String columns) {//固定列元素List<TableColumnVo> list = new ArrayList<TableColumnVo>() {{add(new TableColumnVo("总数", "uploadTotalNum","num"));add(new TableColumnVo("成功数", "uploadSuccessNum","num"));add(new TableColumnVo("失败数", "uploadFailedNum","num"));add(new TableColumnVo("总量", "uploadTotalSize","size"));add(new TableColumnVo("成功数据量", "uploadSuccessSize","size"));add(new TableColumnVo("失败数据量", "uploadFailedSize","size"));......}};//动态列元素List<TableColumnVo> dynamicList = new ArrayList<TableColumnVo>(){{add(new TableColumnVo("统计时间", "statDate"));}};//根据前端选择条件添加动态列if (StringUtils.isNotEmpty(columns)) {Map<String, TableColumnVo> dynamicColumnsMap = new HashMap<String, TableColumnVo>() {{put("SERVICE_NAME", new TableColumnVo("服务名", "serviceName"));put("BIZ_NAME", new TableColumnVo("业务名", "bizName"));put("USER_NAME", new TableColumnVo("用户名", "userName"));}};String[] arr = columns.split(",");for (String item : arr) {if (StringUtils.isNotEmpty(item)) {TableColumnVo tableColumnVo = dynamicColumnsMap.get(item);if (tableColumnVo != null) {dynamicList.add(tableColumnVo);}}}}Map<String,List<TableColumnVo>> map = new HashMap<>();map.put("dynamicList",dynamicList);map.put("nomalList",list);return AjaxResult.success(map);}
public class TableColumnVo {/** 表头 */private String title;/** 字段 */private String field;/** 类型 用于前端单位转换* num：文件个数* size：文件大小* */private String type;}
根据前端传回的信息(勾选了那几个动态列)，后端进行组合
dynamicList.forEach(function(item) {header.push({field : item.field,title : item.title,align : 'center',colspan: 1,rowspan: 3})})
前端拿到数据之后push到数组中，最后push到多元数组中，进行表格初始化
