bootstrap table实现合并单元格效果
更新时间：2018年12月24日 17:16:48 作者：每个人都可以成为导师
这篇文章主要为大家详细介绍了bootstrap table实现合并单元格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果。
JavaScript代码
声明mergeCells函数，如：
/**
* 合并单元格
* @param data 原始数据（在服务端完成排序）
* @param fieldName 合并属性名称
* @param colspan 合并列
* @param target 目标表格对象
*/
function mergeCells(data,fieldName,colspan,target){
//声明一个map计算相同属性值在data对象出现的次数和
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加载成功执行，如
onLoadSuccess : function(data) {
var data = $('#table').bootstrapTable('getData', true);
//合并单元格
mergeCells(data, "companyTypeName", 1, $('#table'));
},
效果图
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Javascript中prototype属性实现给内置对象添加新的方法
这篇文章主要介绍了Javascript中prototype属性实现给内置对象添加新的方法,涉及javascript中prototype属性的使用技巧,需要的朋友可以参考下2015-05-05
这里给大家分享的是4屏带标题和文字描述的js图片轮播代码，完美兼容IE6。图片滚动切换，鼠标放到数字选项卡即可切换图片。点击图片跳转到指定页面，有需要的小伙伴可以参考下。2015-05-05
try...catch 可以测试代码中的错误,try 部分包含需要运行的代码,而catch部分包含错误发生时运行的代码,这篇文章主要给大家介绍了关于Javascript中try catch的2个作用,需要的朋友可以参考下2021-09-09
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了hammer.js实现图片手势放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
我们在学习JavaScript中,难免都会去网上查一些资料,也许偶尔就会遇到“事件委托”,但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止,对于我这个比较好奇的人来说,实在很头疼,尤其是想更多的了解“事件委托”的时候2015-06-06
在JavaScript中,变量的定义是编程的基础,而JavaScript提供了多种灵活的方式来定义变量,本文将详细盘点JavaScript中所有变量定义的方式,并结合代码示例进行说明,需要的朋友可以参考下2025-01-01
webpack使用Symbol.toStringTag(Symbol.toStringTag用法)
Symbol.toStringTag是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，这篇文章主要介绍了webpack使用Symbol.toStringTag(Symbol.toStringTag用法),需要的朋友可以参考下2024-02-02
这篇文章主要介绍了ES2020 新特性(种草),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
JavaScript提供了一些内置的日期和时间函数，有助于从日期（出生日期）开始计算年龄。本文主要介绍了使用这些JavaScript方法，制作一个简单的年龄计算器，快来跟随小编一起学习学习吧2021-12-12
最新评论