bootstrap-table组合表头，Excel表格样式

最新推荐文章于 2022-11-05 15:19:41 发布

求知者_______

最新推荐文章于 2022-11-05 15:19:41 发布

阅读量1k

点赞数 1

文章标签： bootstrap-table 组合表头 Excel表格样式

本文链接：https://blog.youkuaiyun.com/weixin_43843164/article/details/103448703

版权

本文介绍如何利用bootstrap-table实现组合表头，并呈现Excel风格的表格效果。内容包括展示效果图、HTML结构代码和JavaScript实现代码，其中columns的配置决定了Excel表格的行列布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap-table组合表头，Excel表格样式

页面展示的表格就是下载出来的Excel表格样式

一、效果图

在这里插入图片描述

二、HTML代码

<table id="table"></table>

三、JS代码

$("#table").bootstrapTable({
            dataType: "json",
            method: 'get',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            url:"../data/mergeData.json",
            columns:[

                [
                    {
                        "title": "洗衣机统计表",
                        "halign":"center",
                        "align":"center",
                        "colspan": 5
                    }
                ],
                [
                    {
                        field: 'name',
                        title: "功能分组",
                        valign:"middle",
                        align:"center",
                        colspan: 1,
                        rowspan: 2
                    },
                    {
                        title: "美的",
                        valign:"middle",
                        align:"center",
                        colspan: 2,
                        rowspan: 1
                    },
                    {
                        title: "松下",
                        valign:"middle",
                        align:"center",
                        colspan: 2,
                        rowspan: 1
                    }
                ],
                [
                    {
                        field: 'mideaNum',
                        title: '数量',
                        valign:"middle",
                        align:"center"
                    },
                    {
                        field: 'mideaPercent',
                        title: '占比',
                        valign:"middle",
                        align:"center"
                    },
                    {
                        field: 'panasonicNum',
                        title: '数量',
                        valign:"middle",
                        align:"center"
                    },
                    {
                        field: 'panasonicPercent',
                        title: '占比',
                        valign:"middle",
                        align:"center"
                    }
                ]
            ]
        })

解释： columns中 '[ ]‘表示excel的一行，’ { } '表示excel的一列

转载