Bootstrap-table实现动态合并相同行

最新推荐文章于 2024-01-20 16:06:00 发布

aocheqing0591

最新推荐文章于 2024-01-20 16:06:00 发布

阅读量1.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhukaixin/p/11376654.html

版权

Bootstrap-table 表格合并相同名字的列@编写function()/** * 合并行 * @param data 原始数据（在服务端完成排序） * @param fieldName 合并属性名称数组 * @param colspan 列数 * @param target 目标表格对象 */ functi...

摘要由CSDN通过智能技术生成

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="&#

最低0.47元/天解锁文章

aocheqing0591

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-table实现动态合并相同行

Bootstrap-table 表格合并相同名字的列@编写function()/** * 合并行 * @param data 原始数据（在服务端完成排序） * @param fieldName 合并属性名称数组 * @param colspan 列数 * @param target 目标表格对象 */ functi...
复制链接

扫一扫