Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格

最近要做一个统计表格，主要是有两个问题

第一：列太多需要实现组合表头

第二：需要根据统计的纬度来动态的添加表格的列

先来看看效果吧：

组合表头效果

动态列效果，选择了服务和用户选项，表格里面会添加这两个列

下面说下如何实现，先说组合表头，我用的是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")
    @ResponseBody
    public 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到多元数组中，进行表格初始化