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个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
Bootstrap Table使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
mergeCells(string $scope, string $data [, resource $formatHandler]): self string $scope $excel->fileName("test.xlsx") ->mergeCells('A1:C1', 'Merge cells') ->output();
-
本文向大家介绍element实现合并单元格通用方法，包括了element实现合并单元格通用方法的使用技巧和注意事项，需要的朋友参考一下 主要思路： 对数据进行处理，写了一个getSpanData通用方法。 用api中提供的span-method方法。 span-method方法用法： 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前
-
本文向大家介绍jQuery实现HTML表格单元格的合并功能，包括了jQuery实现HTML表格单元格的合并功能的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 合并前： 合并后： 具体代码如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇
-
pre { white-space: pre-wrap; } 数据网格（datagrid）经常需要合并一些单元格。本教程将向您展示如何在数据网格（datagrid）中合并单元格。 为了合并数据网格（datagrid）单元格，只需简单地调用 'mergeCells' 方法，并传入合并信息参数，告诉数据网格（datagrid）如何合并单元格。在所有合并的单元格中，除了第一个单元格，其它单元格在合并后被
-
我知道如何合并单元格，这段代码有效： 我遇到的问题是，我在IIS版本的服务器循环中执行此操作。因此，尽管我总是知道列，但我不一定知道行。这个数字会有所不同。 假设它到达列表中的第5个服务器，这些单元需要合并。我试过这个： 以为电脑会知道我的意思 但它什么也没做。没有错误，只是娜达。 我在这里和谷歌上搜索过，但在每一篇文章中，人们都在合并他们知道列和行是静态的单元格。正如我所说，我的排将是动态的。
-
我使用Google Sheets API在我的javascript应用程序中显示我的Google电子表格中的数据。已通过引用此留档开发。我可以从电子表格中读取值，但对于某些列，单元格合并如下。 我得到的Json响应如下所示 我的预期输出应该是 有什么帮助吗？
-
在旧版本中，您可以键入以下内容： 这会产生外部边框--即使是在合并的单元格周围，也会使用选定的颜色。不幸的是，在POI的新版本中，我似乎不能使用索引颜色，因为获得自定义RGB颜色索引的方法不起作用，并且被降级或标记为仅供测试。
-
我想数一下一行中有多少单元格被合并了？我在Excel中合并（缩放）它，在Java中我想显示例如：“合并的单元格：4”(A1，B1，C1，D1)？