bootstrap table实现合并单元格效果
程序员文章站
2022-04-10 09:58:12
本文实例为大家分享了客户端运用bootstraptable 的mergecells属性合并单元格来达到报表分析展示的直观效果。
javascript代码
声明mer...
本文实例为大家分享了客户端运用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 数据表格行内修改的实现代码
-
jQuery实现合并表格单元格中相同行操作示例
-
Bootstrap Table实现定时刷新数据的方法
-
JQuery实现table行折叠效果以JSON做数据源
-
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
-
Element-UI Table组件上添加列拖拽效果实现方法
-
如何使用js快速合并table单元格
-
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
-
bootstrap table合并行数据并居中对齐效果
-
BootStrap table实现表格行拖拽效果