bootstrap-table 多层组合表头

如下图所示的二层组合表头

来人,上代码!

javascript 复制代码
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的一层表头,二层表头就会从这里开始罗列显示

相关推荐
郑州光合科技余经理11 小时前
本地生活服务系统:成品模块和定制接口怎么划界
java·前端·人工智能·后端·系统架构·php·ai编程
平头哥~14 小时前
Day 07 _ 那条 1px 的线,为什么在手机上忽粗忽细
前端·css·样式·学习资料
小江的记录本15 小时前
【CSS】CSS 动画:transition、animation、transform、CSS3 新特性(附《思维导图》)
前端·css·安全·spring·前端框架·css3·动画
circuitsosk15 小时前
任务规划器的三种范式对比:ReAct、Plan-and-Execute 与 Tree-of-Thought 在真实业务中的取舍
前端·javascript·python·react.js·llm·ai agent
hzxpaipai16 小时前
企业官网技术架构拆解:前端、后台、数据库、服务器如何协同
前端·数据库·架构
深念Y18 小时前
Lenovo XiaoXinAir 14 — 性能模式切换
前端·网络
计算机魔术师18 小时前
Meta突然杀进第一梯队:一个新模型,把AI推理成本打下来8倍
前端
IT_陈寒19 小时前
Redis缓存雪崩把我坑惨了,这次长记性了
前端·人工智能·后端
风骏时光牛马19 小时前
提示词工程:大模型效能挖掘与指令设计实战
前端