bootstrap-table組合表頭的實(shí)現(xiàn)方法
最近需要做一個(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í)有所幫助,也希望大家多多支持腳本之家。
- bootstrap-table實(shí)現(xiàn)表頭固定以及列固定的方法示例
- Bootstrap-table使用footerFormatter做統(tǒng)計(jì)列功能
- bootstrap-table實(shí)現(xiàn)服務(wù)器分頁的示例 (spring 后臺)
- bootstrap-table+treegrid實(shí)現(xiàn)樹形表格
- bootstrap-table.js擴(kuò)展分頁工具欄(增加跳轉(zhuǎn)到xx頁)功能
- bootstrap-table formatter 使用vue組件的方法
- Bootstrap-table自定義可編輯每頁顯示記錄數(shù)
- Node.js中Bootstrap-table的兩種分頁的實(shí)現(xiàn)方法
- Bootstrap table學(xué)習(xí)筆記(2) 前后端分頁模糊查詢
- bootstrap table 服務(wù)器端分頁例子分享
- Bootstrap table分頁問題匯總
- bootstrap-table后端分頁功能完整實(shí)例
相關(guān)文章
JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面功能【實(shí)用】
本文分享了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面功能的具體實(shí)例代碼,頁面代碼簡單,直接拷貝就能運(yùn)行,頁面可以自己美化下哦。需要的朋友一起來看下吧2016-12-12js實(shí)現(xiàn)橫向伸展開的二級導(dǎo)航菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)橫向伸展開的二級導(dǎo)航菜單代碼,涉及javascript鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-08-08JS 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的“59秒后重新發(fā)送驗(yàn)證短信”功能
這篇文章主要介紹了JS 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的“59秒后重新發(fā)送驗(yàn)證短信”功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08JavaScript中“過于”犀利地for/in循環(huán)使用示例
Java中的增強(qiáng)for循環(huán)很是好用,但是JavaScript中為我們提供的for/in循環(huán)已然不是這么簡單了,下面有個(gè)簡單的示例,大家不妨參考下2013-10-10javascript canvas封裝動態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09詳解webpack和webpack-simple中如何引入css文件
這篇文章主要介紹了詳解webpack和webpack-simple中如何引入css文件,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較
這篇文章主要介紹了JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較,需要的朋友可以參考下2014-03-03