bootstrap-table 多层组合表头

原创于 2024-03-01 16:51:09 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

html

5 篇文章

订阅专栏

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

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

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()},
        ],
    ]
});