欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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的字段是對應(yīng)的跨行字段,該字段與mergeData.json中的name相對應(yīng),colspan與rowspan是該字段所占的列數(shù)與行數(shù),其它字段與之類似

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

4、mergeData.json

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

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

相關(guān)文章

最新評論