bootstrap-table組合表頭的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-10-05 13:12:41 來(lái)源：腳本之家閱讀：226 作者：慵懶的小豬欄目：web開(kāi)發(fā)

最近需要做一個(gè)表格樣式，需要組合表頭，現(xiàn)在把做出來(lái)的分享給大家，

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": "洗衣機(jī)統(tǒng)計(jì)表",
            "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: '數(shù)量',
            valign:"middle",
            align:"center"
          },
          {
            field: 'mideaPercent',
            title: '占比',
            valign:"middle",
            align:"center"
          },
          {
            field: 'panasonicNum',
            title: '數(shù)量',
            valign:"middle",
            align:"center"
          },
          {
            field: 'panasonicPercent',
            title: '占比',
            valign:"middle",
            align:"center"
          }
        ]
      ]
    })

columns中存放三組數(shù)組：

第一組數(shù)組存放的是表的標(biāo)題信息，其中的colspan為整個(gè)表所有的列數(shù)

第二組存放的是表中第二行標(biāo)題，其中field為name的字段是對(duì)應(yīng)的跨行字段，該字段與mergeData.json中的name相對(duì)應(yīng)，colspan與rowspan是該字段所占的列數(shù)與行數(shù)，其它字段與之類似

第三組存放的是表中的第三行標(biāo)題，與mergeData.json中的數(shù)據(jù)相對(duì)應(yīng)

4、mergeData.json

 [
   {"name":"滾筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},
   {"name":"波輪","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
 ]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

bootstrap-table組合表頭的實(shí)現(xiàn)方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽