bootstrap table實(shí)現(xiàn)合并單元格效果
更新時(shí)間：2018年12月24日 17:16:48 作者：每個(gè)人都可以成為導(dǎo)師
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)合并單元格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了客戶端運(yùn)用bootstrapTable 的mergeCells屬性合并單元格來(lái)達(dá)到報(bào)表分析展示的直觀效果。
JavaScript代碼
聲明mergeCells函數(shù)，如：
/**
* 合并單元格
* @param data 原始數(shù)據(jù)（在服務(wù)端完成排序）
* @param fieldName 合并屬性名稱
* @param colspan 合并列
* @param target 目標(biāo)表格對(duì)象
*/
function mergeCells(data,fieldName,colspan,target){
//聲明一個(gè)map計(jì)算相同屬性值在data對(duì)象出現(xiàn)的次數(shù)和
var sortMap = {};
for(var i = 0 ; i < data.length ; i++){
for(var prop in data[i]){
if(prop == fieldName){
var key = data[i][prop]
if(sortMap.hasOwnProperty(key)){
sortMap[key] = sortMap[key] * 1 + 1;
} else {
sortMap[key] = 1;
}
break;
}
}
}
for(var prop in sortMap){
console.log(prop,sortMap[prop])
}
var index = 0;
for(var prop in sortMap){
var count = sortMap[prop] * 1;
$(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
index += count;
}
}
在bootstrapTable加載成功執(zhí)行，如
onLoadSuccess : function(data) {
var data = $('#table').bootstrapTable('getData', true);
//合并單元格
mergeCells(data, "companyTypeName", 1, $('#table'));
},
效果圖
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中prototype屬性實(shí)現(xiàn)給內(nèi)置對(duì)象添加新的方法
這篇文章主要介紹了Javascript中prototype屬性實(shí)現(xiàn)給內(nèi)置對(duì)象添加新的方法,涉及javascript中prototype屬性的使用技巧,需要的朋友可以參考下2015-05-05
JavaScript實(shí)現(xiàn)帶標(biāo)題的圖片輪播特效
這里給大家分享的是4屏帶標(biāo)題和文字描述的js圖片輪播代碼，完美兼容IE6。圖片滾動(dòng)切換，鼠標(biāo)放到數(shù)字選項(xiàng)卡即可切換圖片。點(diǎn)擊圖片跳轉(zhuǎn)到指定頁(yè)面，有需要的小伙伴可以參考下。2015-05-05
聊聊Javascript中try catch的2個(gè)作用
try...catch 可以測(cè)試代碼中的錯(cuò)誤,try 部分包含需要運(yùn)行的代碼,而catch部分包含錯(cuò)誤發(fā)生時(shí)運(yùn)行的代碼,這篇文章主要給大家介紹了關(guān)于Javascript中try catch的2個(gè)作用,需要的朋友可以參考下2021-09-09
Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap中文本框的寬度變窄并且加入一副驗(yàn)證碼圖片的實(shí)現(xiàn)方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果
這篇文章主要為大家詳細(xì)介紹了hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
我們?cè)趯W(xué)習(xí)JavaScript中,難免都會(huì)去網(wǎng)上查一些資料,也許偶爾就會(huì)遇到“事件委托”,但是,大多數(shù)時(shí)說(shuō)的是“事件綁定”,對(duì)于“事件委托”,或是不提,或是淺嘗輒止,對(duì)于我這個(gè)比較好奇的人來(lái)說(shuō),實(shí)在很頭疼,尤其是想更多的了解“事件委托”的時(shí)候2015-06-06
JavaScript中所有聲明變量的方式及特性總結(jié)
在JavaScript中,變量的定義是編程的基礎(chǔ),而JavaScript提供了多種靈活的方式來(lái)定義變量,本文將詳細(xì)盤(pán)點(diǎn)JavaScript中所有變量定義的方式,并結(jié)合代碼示例進(jìn)行說(shuō)明,需要的朋友可以參考下2025-01-01
webpack使用Symbol.toStringTag(Symbol.toStringTag用法)
Symbol.toStringTag是一個(gè)內(nèi)置 symbol，它通常作為對(duì)象的屬性鍵使用，對(duì)應(yīng)的屬性值應(yīng)該為字符串類型，這個(gè)字符串用來(lái)表示該對(duì)象的自定義類型標(biāo)簽，這篇文章主要介紹了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了ES2020 新特性(種草),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
基于HTML+JS實(shí)現(xiàn)簡(jiǎn)單的年齡計(jì)算器
JavaScript提供了一些內(nèi)置的日期和時(shí)間函數(shù)，有助于從日期（出生日期）開(kāi)始計(jì)算年齡。本文主要介紹了使用這些JavaScript方法，制作一個(gè)簡(jiǎn)單的年齡計(jì)算器，快來(lái)跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12