bootstrap-table 多层组合表头

最新推荐文章于 2025-05-04 16:57:38 发布

西红柿多钱一斤

最新推荐文章于 2025-05-04 16:57:38 发布

阅读量1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： html js 文章标签： bootstrap 前端 html

本文链接：https://blog.youkuaiyun.com/User_Lily/article/details/136399864

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

html

5 篇文章

订阅专栏

文章介绍了如何在BootstrapTable插件中设置二层表头，确保昵称和创建时间作为顶层表头，而其他如微信、支付宝数据作为第二层，通过调整rowspan属性来实现这种多级结构。

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

如下图所示的二层组合表头
在这里插入图片描述
来人，上代码！

table.bootstrapTable({
    url: $.fn.bootstrapTable.defaults.extend.index_url,
    pk: 'id',
    sortName: 'id',
    search: false,
    showToggle: false,
    showColumns: false,
    showExport: false, commonSearch: false,
    columns: [
        [
            {field: 'nickname', title: __('昵称'), valign:"middle", align:"center", colspan: 1, rowspan: 2, operate: false},
            {field: 'createtime',title: __('创建时间'),autocomplete: false,valign:"middle",align:"center",colspan: 1,rowspan: 2,formatter: Table.api.formatter.datetime, operate: false},
            {title: "今日数据",valign:"middle", align:"center", colspan: colspan(), rowspan: 1,visible: visible()},
        ],[
            {field: 'money_sum_today', title: __('微信'), operate: false,align:'center',halign:"center",visible: visible()},
            {field: 'score_sum_today', title: __('支付宝'), operate: false,align:'center',halign:"center",visible: visible()},
        ],
    ]
});