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