bootstrapTable通過rowspan/colspan合併單元格

行列數量、名稱已經確定

• 入門版本

<!--數據展現部分-->
<table id="table">
</table>
<script>
$("#table").bootstrapTable({
  columns: [
    [
      {'title': '', 'colspan':2},
      {'title': '綜合', 'colspan':2}
    ],
    [
      {title: 'col1', colspan: 1},
      {title: 'col2', colspan: 1},
      {title: 'col3', colspan: 1},
      {title: 'col4', colspan: 1}
    ]
  ]
})
</script>

效果圖：

注意：
boostraptable添加行列的時候默認是從左到右從上到下且不會自動換行
不同中括號中的內容分佈在相鄰兩行。

• 正常版本

<table id="table">

</table>

<script>
$("#table").bootstrapTable({
  columns: [
    [
      {title: '', colspan:2},
      {title: '綜合', colspan:2}
    ],
    [
      {title: 'col1', colspan: 1, rowspan: 2},
      {title: 'col2', colspan: 1, rowspan: 1},
      {title: 'col3', colspan: 1, rowspan: 1},
      {title: 'col4', colspan: 1, rowspan: 1}
    ],
    [
      {title: 'col5'},
      {title: 'col6'},
      {title: 'col7'}
    ]
  ]
})
</script>

效果圖：

• 中高級版本

  這個版本是https://www.cnblogs.com/hwaggLee/p/7843100.html上學習到的

<table id="table">
</table>
<!--
注意：halign/align/valign都是調整每一個單元格中title的位置，可以用left/right/top/botton等替換center測試一下效果
-->
<script>
$("#table").bootstrapTable({
             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"
                     }
                 ]
             ]
         })
</script>

效果圖：

大家測試效果的時候可以用一下bootstrapTable官網的在線測試https://live.bootstrap-table.com/
點擊上方的run就能出結果了。港真，這個挺好用的