最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家,
<强>,1,效果图
<强> 2,html代码
& lt;表id="表"祝辞& lt;/table>之前
<强> 3,javascript代码
$(" #表").bootstrapTable ({
数据类型:“json”,
方法:“得到”,
contentType:“应用程序/x-www-form-urlencoded”,
缓存:假的,
url:“. ./数据/mergeData.json”,
列:[
(
{
“标题”:“洗衣机统计表”,
“halign”:“中心”,
“对齐”:“中心”,
“colspan”: 5
}
),
(
{
:“名字”,
标题:“功能分组”,
valign:“中产阶级”,
对齐:“中心”,
colspan: 1、
行宽:2
}，
{
标题:“美”的,
valign:“中产阶级”,
对齐:“中心”,
colspan: 2
行宽:1
}，
{
标题:“松下”,
valign:“中产阶级”,
对齐:“中心”,
colspan: 2
行宽:1
}
),
(
{
:“mideaNum”,
标题:“数量”,
valign:“中产阶级”,
对齐:“中心”
}，
{
:“mideaPercent”,
标题:“占比”,
valign:“中产阶级”,
对齐:“中心”
}，
{
:“panasonicNum”,
标题:“数量”,
valign:“中产阶级”,
对齐:“中心”
}，
{
:“panasonicPercent”,
标题:“占比”,
valign:“中产阶级”,
对齐:“中心”
}
]
]
})
之前
列中存放三组数组:
第一组数组存放的是表的标题信息,其中的colspan为整个表所有的列数
第二组存放的是表中第二行标题,其中字段为名称的字段是对应的跨行字段,该字段与mergeData.json中的名字相对应,colspan与行宽是该字段所占的列数与行数,其它字段与之类似
第三组存放的是表中的第三行标题,与mergeData.json中的数据相对应
<强> 4,mergeData.json
(
{" name ": "滚筒”、“mideaNum”:“10”、“mideaPercent”:“29%”,“panasonicNum”:“10”、“panasonicPercent”:“29%”},
{" name ": "波轮”、“mideaNum”:“9”,“mideaPercent”:“28%”,“panasonicNum”:“10”、“panasonicPercent”:“29%”}
)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
