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'));

},

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • bootstrap table实现横向合并与纵向合并

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 先上html代码 <div id="test" class="table-responsive" style="padding: 0;overflow:auto;"> <table id="resourceTable" style="min-width:1500px;" class="table

  • bootstrap Table实现合并相同行

    bootstrap Table实现合并相同行

    本文实例为大家分享了bootstrapTable实现合并相同行的具体代码,供大家参考,具体内容如下 方法:调用mergeCells(data, fieldName, target),可以实现合并相同行 var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'update_time',

  • bootstrap table合并行数据并居中对齐效果

    bootstrap table合并行数据并居中对齐效果

    本文实例为大家分享了bootstrap table合并行数据并居中对齐的具体代码,供大家参考,具体内容如下 渲染表格后进行数据行合并 onLoadSuccess: function (data) { $('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3}); } 整体代码 $('#tableStyle').bootstrapTable({ url: '/table/tableStyle

  • bootstrap table实现合并单元格效果

    bootstrap table实现合并单元格效果

    本文实例为大家分享了客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果. JavaScript代码 声明mergeCells函数,如: /** * 合并单元格 * @param data 原始数据(在服务端完成排序) * @param fieldName 合并属性名称 * @param colspan 合并列 * @param target 目标表格对象 */ function mergeCells(data,fieldName,colspa

  • antd vue table跨行合并单元格,并且自定义内容实例

    ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片 效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla

  • JS实现动态修改table及合并单元格的方法示例

    JS实现动态修改table及合并单元格的方法示例

    本文实例讲述了JS实现动态修改table及合并单元格的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-

  • bootstrap table实现单击单元格可编辑功能

    要使bootstrap-table实现可编辑,需要配合使用x-editable插件. 先在页面上导入必要的css和js文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

  • Bootstrap实现的表格合并单元格示例

    Bootstrap实现的表格合并单元格示例

    本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

  • element-ui中Table表格省市区合并单元格的方法实现

    本文介绍了element-ui中Table表格省市区合并单元格的方法实现,分享给大家,具体如下: 效果如图 代码如下: <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="搜索"> <el-input v-mod

  • java 后端生成pdf模板合并单元格表格的案例

    这里只放部分片段的代码 java中使用二维数组生成表格非常方便,但是每一维的数组都需要排好序,而且,在java中所谓的二维数组,三维数组等,其实都是多个一维数组组成的 /** * 添加子女教育规划表. * @param name 子女姓名 * @param educationItems 某个孩子的教育规划的二维数组,每列依次是:学程阶段.年数.费用支出(元)/年.年增长率 * @param spacing * @throws DocumentException * @throws IOExcep

  • 浅谈openpyxl库,遇到批量合并单元格的问题

    浅谈openpyxl库,遇到批量合并单元格的问题

    我就废话不多说了,大家还是直接看代码吧~ from openpyxl import Workbook from openpyxl import load_workbook from openpyxl.styles import NamedStyle, Border, Side, Alignment # 创建一个工作薄 wb = Workbook() # 创建一个工作表(注意是一个属性) table = wb.active # excel创建的工作表名默认为sheet1,一下代码实现了给新创建的工

  • ASP.NET GridView 实现课程表显示(动态合并单元格)实现步骤

    ASP.NET GridView 实现课程表显示(动态合并单元格)实现步骤

    GridView,ASP.NET中很常用的数据显示控件,这里,我将用这个控件来实现课程表的显示.首先说说课程表的显示与普通记录的显示有何不同?这里所说的普通记录是指直接从数据库中查询出来的.没有经过任何处理的记录.通常,我们用GridView显示这些普通记录,只需直接将这些记录表绑定到GridView中即可.但是,课程表的显示可不是这么简单,它需要将普通记录继续加工,需要根据记录中具体的数据来确定数据需要显示在哪一行.哪一列,而且需要根据课程开始时间和结束时间动态合并单元格,最后才是数据的显示.

  • JSP中动态合并单元格的实例代码

    废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q

随机推荐