bootstrap table实现合并单元格效果


Posted in Javascript onDecember 24, 2018

本文实例为大家分享了客户端运用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'));
 
},

效果图

bootstrap table实现合并单元格效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 #Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 #Javascript
Vue.js组件高级特性实例详解
Dec 24 #Javascript
JavaScript模板引擎原理与用法详解
Dec 24 #Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
原生js实现Flappy Bird小游戏
Dec 24 #Javascript
You might like
php中的时间显示
2007/01/18 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python3的pip路径在哪
2020/06/23 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
什么是属性访问器
2015/10/26 面试题
Prototype如何更新局部页面
2013/03/03 面试题
解放思想大讨论活动心得体会
2014/09/11 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2016中秋节问候语
2015/11/11 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
用python批量解压带密码的压缩包
2021/05/31 Python
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python