BootstrapTable 插件合并单元格
2017-07-27 16:49
369 查看
BootstrapTable 插件合并单元格
客户端运用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')); },
效果图
相关文章推荐
- jquery写的一个表格合并单元格的插件
- Bootstrap 表格插件 BootstrapTable : jQuery.fn.bootstrapTable.defaults
- 使用bootstraptable插件实现表格记录的查询、分页、排序操作
- 在 Bootstraptable 插件基础上新增可编辑行
- 前端表格插件 BootstrapTable 入门教程
- 日常总结之小狐狸项目1——chosen使用, bootstrapTable, 及其他好用的包,插件
- ABP入门系列应用BootstrapTable表格插件
- 4000 [置顶] bootStrapTable开源插件的修改指定行背景和指定列背景函数
- bootstrapTable(表格插件)使用小记(很实用的)
- ABP入门系列(14)——应用BootstrapTable表格插件
- 基于SSH的BootstrapTable插件使用小记
- bootstrapTable 插件使用注意点
- jquery.table.rowspan.js 表格自动合并单元格插件
- Js与flash交互:在html页面中用js与MyReport插件交互
- 安装新插件后eclipse起不来的问题
- WordPress音乐插件 Aive Playlist 自适应音乐列表管理插件[更新至v.1.0]
- Qt5的插件机制(1)--Qt 框架中的插件加载机制概述
- 编译hadoop-eclipse插件
- 【笔记】Eclipse反编译工具Jad及插件JadClipse配置
- Sublime 3安装(Python开发插件安装)