Bootstrap-table  表格合并相同名字的列

@编写function()

/**

   * 合并行

   * @param data  原始数据（在服务端完成排序）

   * @param fieldName 合并属性名称数组

   * @param colspan 列数

   * @param target 目标表格对象

   */

  function mergeCells(data, fieldName, colspan, target) {

    if (data.length == 0) {

      alert("不能传入空数据");

      return;

    }

    var numArr = [];

    var value = data[0][fieldName];

    var num = 0;

    for (var i = 0; i < data.length; i++) {

      if (value != data[i][fieldName]) {

        numArr.push(num);

        value = data[i][fieldName];

        num = 1;

        continue;

      }

      num++;

    }

    var merIndex = 0;

    for (var i = 0; i < numArr.length; i++) {

      $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })

      merIndex += numArr[i];

    }

  }

完整代码：html/js

　

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <link th:href="@{/common/bootstrap/css/bootstrap.css}" rel="stylesheet"/>

  <link th:href="@{/common/bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>

  <link th:href="@{/common/bootstrap/css/bootstrap-combined.min.css}" rel="stylesheet"/>

  <link th:href="@{/common/bootstrap/css/layoutit.css}" rel="stylesheet"/>

  <link th:href="@{/common/bootstrap-table/bootstrap-table.css}" rel="stylesheet"/>

<style>

  .main{

    background: #999999;

  }

  body{margin：0；padding：0；}

</style>

</head>

<body >

<div class="main">

<div style="text-align: center"><h2>table</h2></div>

<table id="example" border="1">

</table>

</div>

<!-- 全局js -->

<script th:src="@{/common/jquery/jquery.min.js}"></script>

<script th:src="@{/common/bootstrap/js/bootstrap.js}"></script>

<script th:src="@{/common/bootstrap-table/bootstrap-table.js}"></script>

<script th:src="@{/common/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>

<script type="text/javascript">

  init();

  function init(){

    $('#example').bootstrapTable({

      url: '/init/table',

      method: 'get',

      striped: true,

      toolbar: "#toolbar",

      sidePagination: "true",

      striped: true, // 是否显示行间隔色

      //search : "true",

      uniqueId: "ID",

      pageSize: "25",

      pagination: true, // 是否分页

      sortable: true, // 是否启用排序

      search:true,

      showColumns: true,

      showRefresh: true,

      onLoadSuccess: function (data) {

      //  mergeColspan(data,"name" , $('#example'));//列合并

        mergeCells(data, "name", 1, $('#example'));//行合并

      },

      columns: [

        [

          {

            "title": "指 标",

            "halign":"center",

            "align":"center",

            "colspan": 2

          },

          {

            "title": "姓 名",

            "halign":"center",

            "align":"center"

          },

          {

            "title": "别 名",

            "halign":"center",

            "align":"center"

          }

        ],

        [

          {

            field: 'name',

            title: '姓 名'

          },

          {

            field: 'id',

            title: 'id'

          },

        {

          field: 'firstName',

          title: '姓名'

        },

        {

          field: 'lastName',

          title: '别名'

        }

        ]

      ]

    });

    //操作栏的格式化

    function actionFormatter(value, row, index) {

      var id = value;

      var result = "";

      result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";

      result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";

      result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

      return result;

    }

  }

  /**

   * 合并行

   * @param data  原始数据（在服务端完成排序）

   * @param fieldName 合并属性名称数组

   * @param colspan 列数

   * @param target 目标表格对象

   */

  function mergeCells(data, fieldName, colspan, target) {

    if (data.length == 0) {

      alert("不能传入空数据");

      return;

    }

    var numArr = [];

    var value = data[0][fieldName];

    var num = 0;

    for (var i = 0; i < data.length; i++) {

      if (value != data[i][fieldName]) {

        numArr.push(num);

        value = data[i][fieldName];

        num = 1;

        continue;

      }

      num++;

    }

    var merIndex = 0;

    for (var i = 0; i < numArr.length; i++) {

      $(target).bootstrapTable('mergeCells', { index: merIndex, field: fieldName, colspan: colspan, rowspan: numArr[i] })

      merIndex += numArr[i];

    }

  }

/*

  /!**

   * 合并列

   * @param data  原始数据（在服务端完成排序）

   * @param fieldName 合并属性数组

   * @param target    目标表格对象

   *!/

  function mergeColspan(data, fieldNameArr, target) {

    if (data.length == 0) {

      alert("不能传入空数据");

      return;

    }

    if (fieldNameArr.length == 0) {

      alert("请传入属性值");

      return;

    }

    var num = -1;

    var index = 0;

    for (var i = 0; i < data.length; i++) {

      num++;

      for (var v in fieldNameArr) {

        index = 1;

        if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) {

          index = 0;

          break;

        }

      }

      if (index == 0) {

        continue;

      }

      $(target).bootstrapTable('mergeCells', { index: num, field: fieldNameArr[0], colspan: fieldNameArr.length, rowspan: 1 });

    }

  }

*/

</script>

</body>

</html>

　　

 ！！！！！！！！！！！！上面的这个合并行的方法有点问题  ： 下面这个方法是可以的 ！！！！！！！！！

/*

合并行

 @param data  原始数据（在服务端完成排序）

 @param fieldName 合并属性名称数组

 @param colspan 列数

 @param target 目标表格对象

*/

function mergeCells(data, fieldName, colspan, target) {

  if (data.length == 0) {

    alert("不能传入空数据");

    return;

  }

  var numArr = [];

  var value = data[0][fieldName];

  var num = 0;

  for (var i = 0; i < data.length; i++) {

    if (value != data[i][fieldName]) {

      numArr.push(num);

      value = data[i][fieldName];

      num = 1;

      continue;

    }

    num++;

  }

  if (typeof (value) != "undefined" && value != "") {

    numArr.push(num);

  }

  var merIndex = 0;

  for (var i = 0; i < numArr.length; i++) {

    $(target).bootstrapTable('mergeCells',

        {

          index: merIndex,

          field: fieldName,

          colspan: colspan,

          rowspan: numArr[i]

        })

    merIndex += numArr[i];

  }

}

　　

Bootstrap-table实现动态合并相同行的更多相关文章

  1. Bootstrap-table实现动态合并相同行(表格同名合并)

    写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...

  2. easyui-datagrid合并相同行功能扩展

    //合并相同行$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(func ...

  3. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  4. easyui datagrid 合并相同行

    $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...

  5. awk之特征相同行的合并 ~转

    awk之特征相同行的合并 文本: 1001  hisk01 1001  hisk02 1001  hisk03 1002  hisk04 1002  hisk05 1002  hisk06 1003 ...

  6. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

  7. 表格组件神器：bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  8. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十三节--RBAC模式及ABP权限管理（附送福利）

    ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...

  9. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

随机推荐

  1. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

  2. HDU 1723 Distribute Message DP

    The contest’s message distribution is a big thing in prepare. Assuming N students stand in a row, fr ...

  3. 移动端BUG

    1.解决 Android 系统 设置line-height和height相同,文字却偏上显示(pc端和ios都显示ok) 行高设置为 normal 则可以解决. 然后高度通过padding填充 lin ...

  4. MySQL for OPS 07：主从复制

    写在前面的话 对于企业而言,在互联网这一块其实最重要的是数据.保证数据的安全性,稳定性是作为运维人的基本工作职责.于是为了数据安全性,引进了数据备份,bin log 等.但这并不意味着有这些就足够了. ...

  5. CentOS系统安装Python3

    准备: CentOS 6.4系统 Python-3.6.5.tgz 下载地址: 官网:https://www.python.org/downloads/release/python-365/ 镜像:h ...

  6. 锁定文件失败，打不开磁盘“D:\biehl\centos\taotao\taotao-dubbo-register\CentOS-000001.vmdk”或它所依赖的某个快照磁盘。模块“Disk”启动失败。未能启动虚拟机

    1.锁定文件失败,打不开磁盘“D:\biehl\centos\taotao\taotao-dubbo-register\CentOS-000001.vmdk”或它所依赖的某个快照磁盘.模块“Disk” ...

  7. Prometheus监控学习笔记之Prometheus查询无数据或者Grafana不显示数据的诡异问题

    0x00 概述 Prometheus和Grafana部署完成后,网络正常,配置文件正常,抓取agent运行正常,使用curl命令获取监控端口数据正常,甚至Prometheus内的targets列表内都 ...

  8. mysql 各版本对比

    具体请看:mysql 各版本差异性对比

  9. 简单ALV得演示（用到了ALV可编辑及保存后修改数据库）

    *&---------------------------------------------------------------------* *& Report YPMRP010_ ...

  10. 解决Linux下ssh登录后出现 报错 Write failed: Broken pipe 的方法

    解决也很简单,在执行 ssh 命令的时候,多加一个参数即可,如下: ssh -p 2200 -o ServerAliveInterval=60 root@8.8.8.8 #服务器 8.8.8.8 的远 ...