springboot 使用templates + bootstrap-table 实现组合表头展示

 /**
     * 查询补助信息列表
     */
    @RequiresPermissions("staffCost:subsidy:list")
    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(StaffCostSubsidy staffCostSubsidy) {
        startPage();
        List<StaffCostSubsidy> list = staffCostSubsidyService.selectStaffCostSubsidyList(staffCostSubsidy);
        return getDataTable(list);
    }

$(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                importUrl: prefix + "/importUrl",
                modalName: "补助信息",
                columns: [
                            [
                                {
                                    field : 'subsidyId',
                                    title : '补助信息id',
                                    visible: false,
                                    rowspan: 3
                                },
                                {
                                    title : '人员',
                                    align : 'center',
                                    valign:"middle",
                                    colspan : 4,
                                    rowspan: 1
                                },
                                {
                                    title : '工资与奖金',
                                    align : 'center',
                                    valign:"middle",
                                    colspan : 3,
                                    rowspan: 1
                                },
                                {
                                    title: '操作',
                                    align: 'center',
                                    formatter: function(value, row, index) {
                                        var actions = [];
                                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.subsidyId + '\')"><i class="fa fa-edit"></i> 编辑</a> ');
                                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.subsidyId + '\')"><i class="fa fa-remove"></i> 删除</a>');
                                        return actions.join('');
                                    },
                                    rowspan: 3
                                }

                            ],
                            [
                                {
                                    field : 'employee.company',
                                    title : '公司',
                                     formatter: function(value, row, index) {
                                         return $.table.selectDictLabel(companyDatas, value);
                                     },
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    field : 'dept.deptName',
                                    title : '部门',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    field : 'post.postName',
                                    title : '岗位',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    field : 'employee.employeeName',
                                    title : '员工姓名',
                                    align: 'center',
                                    rowspan: 2
                                },
                                {
                                    title : '补助',
                                    align : 'center',
                                    valign:"middle",
                                    colspan : 3,
                                    rowspan: 1
                                }
                            ],

                            [
                                {
                                    field : 'subsidyComputer',
                                    title : '电脑',
                                    align : 'center',
                                    formatter: function(value, row, index) {
                                        if(row.subsidyComputer==0){
                                            return "无";
                                        }else {
                                            return 100;
                                        }

                                    },
                                },
                                {
                                    field : 'foodSupplement',
                                    title : '餐补',
                                    align : 'center',
                                },
                                {
                                    field : 'totalGrants',
                                    title : '合计',
                                    align : 'center'
                                },
                            ]
                    ]
            };
            $.table.init(options);
        });

标签：templates,rowspan,center,title,align,表头,field,prefix,springboot
来源： https://www.cnblogs.com/yypr/p/13517066.html