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

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

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

最近需要做一個(gè)表格樣式，需要組合表頭，現(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": "洗衣機(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Highcharts使用簡(jiǎn)例及異步動(dòng)態(tài)讀取數(shù)據(jù)
Highcharts 是一個(gè)用純JavaScript編寫的一個(gè)圖表庫，能夠很簡(jiǎn)單便捷的在web網(wǎng)站或是web應(yīng)用程序添加有交互性的圖表，并且免費(fèi)提供給個(gè)人學(xué)習(xí)、個(gè)人網(wǎng)站和非商業(yè)用途使用，通過本文給大家介紹Highcharts使用簡(jiǎn)例及異步動(dòng)態(tài)讀取數(shù)據(jù)的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
js事件委托和事件代理案例分享
這篇文章主要為大家分享了js事件委托和事件代理案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
web項(xiàng)目開發(fā)之JS函數(shù)防抖與節(jié)流示例代碼
這篇文章主要介紹了web項(xiàng)目開發(fā)之JS函數(shù)防抖與節(jié)流實(shí)現(xiàn)的示例代碼及原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2021-09-09
uniapp如何實(shí)現(xiàn)tabBar之間傳參
這篇文章主要給大家介紹了關(guān)于uniapp如何實(shí)現(xiàn)tabBar之間傳參的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-08-08
js事件監(jiān)聽器用法實(shí)例詳解
這篇文章主要介紹了js事件監(jiān)聽器用法,以實(shí)例形式較為詳細(xì)的分析了javascript事件監(jiān)聽器使用注意事項(xiàng)與相關(guān)技巧,需要的朋友可以參考下
2015-06-06
微信小程序封裝分享與分銷功能過程解析
這篇文章主要介紹了微信小程序封裝分享與分銷功能過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
淺析JavaScript回調(diào)函數(shù)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了JavaScript回調(diào)函數(shù)應(yīng)用，感興趣的朋友可以參考一下
2016-05-05
一文詳解JavaScript中的URL和URLSearchParams
URL，稱為統(tǒng)一資源定位器，指互聯(lián)網(wǎng)上能找到資源定位的字符串，而URLSearchParams對(duì)象是專門用于處理url網(wǎng)址信息中的查詢字符串，本文就來帶大家深入了解一下二者的使用
2023-05-05
JS異步堆棧追蹤之為什么await勝過Promise
與直接使用Promise相比，使用async/await不僅可以使代碼更具可讀性，而且還可以在JavaScript引擎中實(shí)現(xiàn)一些有趣的優(yōu)化。這篇文章是關(guān)于一個(gè)這樣的優(yōu)化，涉及異步代碼的堆棧追蹤。
2021-04-04
javascript 閉包詳解
閉包：是指有權(quán)訪問另外一個(gè)函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另外一個(gè)函數(shù)。在javascript中沒有塊級(jí)作用域，一般為了給某個(gè)函數(shù)申明一些只有該函數(shù)才能使用的局部變量時(shí)，我們就會(huì)用到閉包，我們來詳細(xì)探討下
2015-07-07