溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近需要做一個表格樣式，需要組合表頭，現在把做出來的分享給大家，
1、效果圖
2、html代碼
<table id="table"></table>
3、javascript代碼
$("#table").bootstrapTable({
dataType: "json",
method: 'get',
contentType: "application/x-www-form-urlencoded",
cache: false,
url:"../data/mergeData.json",
columns:[
[
{
"title": "洗衣機統計表",
"halign":"center",
"align":"center",
"colspan": 5
}
],
[
{
field: 'name',
title: "功能分組",
valign:"middle",
align:"center",
colspan: 1,
rowspan: 2
},
{
title: "美的",
valign:"middle",
align:"center",
colspan: 2,
rowspan: 1
},
{
title: "松下",
valign:"middle",
align:"center",
colspan: 2,
rowspan: 1
}
],
[
{
field: 'mideaNum',
title: '數量',
valign:"middle",
align:"center"
},
{
field: 'mideaPercent',
title: '占比',
valign:"middle",
align:"center"
},
{
field: 'panasonicNum',
title: '數量',
valign:"middle",
align:"center"
},
{
field: 'panasonicPercent',
title: '占比',
valign:"middle",
align:"center"
}
]
]
})
columns中存放三組數組：
第一組數組存放的是表的標題信息，其中的colspan為整個表所有的列數
第二組存放的是表中第二行標題，其中field為name的字段是對應的跨行字段，該字段與mergeData.json中的name相對應，colspan與rowspan是該字段所占的列數與行數，其它字段與之類似
第三組存放的是表中的第三行標題，與mergeData.json中的數據相對應
4、mergeData.json
[
{"name":"滾筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},
{"name":"波輪","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
