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

更新時間：2017年09月07日 14:36:32 作者：慵懶的小豬

本篇文章主要介紹了bootstrap-table組合表頭的實現(xiàn)方法，非常具有實用價值，需要的朋友可以參考下

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

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": "洗衣機統(tǒng)計表",
            "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ù)組存放的是表的標題信息，其中的colspan為整個表所有的列數(shù)

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

第三組存放的是表中的第三行標題，與mergeData.json中的數(shù)據(jù)相對應

4、mergeData.json

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: