杂技随笔:BootstrapTable 合并单元格
2019-06-11 11:48
1406 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mrs_chens/article/details/91370025
杂技随笔:BootstrapTable 合并单元格
前言
今天博主将为大家分享:杂技随笔:BootstrapTable 合并单元格,不喜勿喷,如有异议欢迎讨论!
开始
在最近写代码时遇到了一个BootStarpTbale的合并单元格问题因此记录下来以便以后回看
JavaScript代码
/** * 合并单元格 * @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')); }
在这里说一下分页也是可以显示的
记录第二种
/** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param fieldName2 指定行方向可能的合并字段名称 * @param target 目标表格对象 * 以下方法可实现动态行与列的同时合并 */ function mergeCells(data,fieldName,fieldName2,target){ //声明一个map计算相同属性值在data对象 列方向上出现的次数和 var rowsSortMap = {}; for(var i = 0 ; i < data.length ; i++){ for(var prop in data[i]){ if(prop == fieldName){ var key = data[i][prop] if(rowsSortMap.hasOwnProperty(key)){ rowsSortMap[key] = rowsSortMap[key] * 1 + 1; } else { rowsSortMap[key] = 1; } break; } } } //声明一个map计算相同属性值在data对象 行方向上出现的次数和,行方向上我这里指定了另外一列 也可以向不指定从而全部进行查看 var colsSortMap = {}; for(var i = 0 ; i < data.length ; i++){ for(var prop in data[i]){ if(prop == fieldName){ for(var pp in data[i] ){ if(pp == fieldName2){ var key1 = data[i][prop]; var key2 = data[i][pp]; if(key1 == key2){ colsSortMap[key1] = 2; }else{ colsSortMap[key1] = 1; } break; } } } } }; for(var prop in rowsSortMap){ console.log(prop,rowsSortMap[prop]) } for(var prop in colsSortMap){ console.log(prop,colsSortMap[prop]) } $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: count, rowspan: 1}); //寻找对应字段具体值相对应的 rowsSortMap colsSortMap 值,以防止出现乱合并的现象 for(var i = 0 ; i < data.length ; i++){ for(var prop in data[i]){ if(prop == fieldName){ var key = data[i][prop] var rows; var cols; for(var abc in rowsSortMap){ if(abc==key){ rows = rowsSortMap[abc] * 1; } } for(var bcd in colsSortMap){ if(bcd==key){ cols = colsSortMap[bcd] * 1; } } $(target).bootstrapTable('mergeCells',{index:i, field:fieldName, colspan: cols, rowspan: rows}); i += rows - 1; break; } } } };
以上为JS方法 实现了动态调整bootStrapTable表格,分为行方向与列方向的遍历以及对应字段值的匹配
在onloadSuccess中指定即可
onLoadSuccess:function(){ var data = $("#famaModelList").bootstrapTable('getData', true); //合并单元格 mergeCells(data, "f_code", "n_oneDayAsset",$('#famaModelList')); }
到这里杂技随笔:BootstrapTable 合并单元格,分享完毕了,快去试试吧!
最后
-
更多参考精彩博文请看这里:《陈永佳的博客》
-
喜欢博主的小伙伴可以加个关注、点个赞哦,持续更新嘿嘿!
相关文章推荐
- BootstrapTable 插件合并单元格
- shiro学习随笔【四】session过期报 org.apache.shiro.session.UnknownSessionException: There is no session with id
- 以读取博客园随笔备份为例 将xml 序列化成json,再序列化成对象
- shiro学习随笔【四】session过期报 org.apache.shiro.session.UnknownSessionException: There is no session with id
- 【生活随笔】星期天的下午
- shiro学习随笔【五】自定义生成会话ID--SessionIdGenerator
- asp.net 读取word 文档的方法新随笔 1. net 学习线路图,csdn真给力啊!
- 随笔
- 随笔(一)WEB-INF
- TCP/IP学习随笔
- Java.Web - 转向 转发 随笔
- MMORPG战斗系统随笔(三)、AI系统简介
- 随笔20130515
- Spark基础随笔:Spark1.6 Idea下远程调试的2种方法
- 随笔(二):Java开发工具介绍
- 随笔之二
- java之Apache POI 合并单元格
- biztalk随笔2
- 改进版网页表格的合并单元格(支持不连续的列合并)
- .net MVC 学习随笔