bootstrap-table 多层组合表头

5 篇文章 0 订阅

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

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

要点讲解:
columns下每一个数组代表一层
像图中的例子,昵称和创建时间没有二层表头,需要将rowspan字段设为2,当遇到第一个rowspan为1的一层表头,二层表头就会从这里开始罗列显示

  • 10
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值