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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Python中replace方法实例分析
2014/08/20 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
深入理解python中的atexit模块
2017/03/07 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python3实现飞机大战游戏
2020/04/24 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
初中同学聚会感言
2014/02/11 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
大学英语专业求职信
2014/06/21 职场文书
元旦标语大全
2014/10/09 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
东京审判观后感
2015/06/01 职场文书
一个都不能少观后感
2015/06/04 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis