最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家,
1、效果图
2、HTML代码
3、javascript代码
[
{
"title": "洗衣机<a href="https://www.jb51.cc/tag/tongji/" target="_blank" class="keywords">统计</a>表","halign":"center","align":"center","colspan": 5
}
],[
{
field: 'name',title: "<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>分组",valign:"middle",align:"center",colspan: 1,rowspan: 2
},{
title: "美的",colspan: 2,rowspan: 1
},{
title: "松下",rowspan: 1
}
],[
{
field: 'mideaNum',title: '<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>',align:"center"
},{
field: 'mideaPercent',title: '占比',{
field: 'panasonicNum',{
field: 'panasonicPercent',align:"center"
}
]
]
})
columns中存放三组数组:
第一组数组存放的是表的标题信息,其中的colspan为整个表所有的列数
第二组存放的是表中第二行标题,其中field为name的字段是对应的跨行字段,该字段与mergeData.json中的name相对应,colspan与rowspan是该字段所占的列数与行数,其它字段与之类似
第三组存放的是表中的第三行标题,与mergeData.json中的数据相对应