bootstrap table實現(xiàn)合并單元格效果
更新時間:2018年12月24日 17:16:48 作者:每個人都可以成為導師
這篇文章主要為大家詳細介紹了bootstrap table實現(xiàn)合并單元格效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了客戶端運用bootstrapTable 的mergeCells屬性合并單元格來達到報表分析展示的直觀效果。
JavaScript代碼
聲明mergeCells函數(shù),如:
/** * 合并單元格 * @param data 原始數(shù)據(jù)(在服務端完成排序) * @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')); },
效果圖
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
javascript拖拽上傳類庫DropzoneJS使用方法
這篇文章主要介紹了javascript拖拽上傳類庫DropzoneJS使用方法,大家參考使用吧2013-12-12innerText innerHTML的用法以及注意事項 [推薦]
我們常常需要使用另外一些對象的屬性來實現(xiàn)動態(tài)改變其中的文本,它們就是:innerText,outerText,innerHTML,outerHTML,千萬要注意它們的大小寫,因為錯一點您就得不到預期的效果了。2009-05-05JS實現(xiàn)二叉查找樹的建立以及一些遍歷方法實現(xiàn)
本篇文章主要介紹了JS實現(xiàn)二叉查找樹的建立以及一些遍歷方法實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-04-04