小阿七Eason 2023-05-26 08:28 采纳率: 70%
浏览 24
已结题

关于datagrid 复杂报表

现在想用 easyui 的datagrid实现 类似这样的报表 可以实现吗？有没有参考的例子 感谢大家

img

  • 写回答

2条回答 默认 最新

  • 27-1994 2023-05-26 09:39
    关注

    img

    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>EasyUI Datagrid Mergerows Demo</title>
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://www.jeasyui.net/Public/js/easyui/themes/icon.css">
  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
  <style type="text/css">
    #myDatagrid {
      height: 500px;
    }
  
    .merged-row {
      height: 30px;
      line-height: 30px;
      font-weight: bold;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <table id="myDatagrid">
    <thead>
      <tr>
        <th rowspan="2">ID</th>
        <th colspan="2">Name</th>
        <th rowspan="2">Age</th>
        <th rowspan="2">Gender</th>
        <th colspan="4">Address</th>
      </tr>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Street</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">1</td>
        <td>Alice</td>
        <td>Smith</td>
        <td>20</td>
        <td>Female</td>
        <td rowspan="2">123 Main St., Anytown USA</td>
        <td rowspan="2">Anytown</td>
        <td rowspan="2">CA</td>
        <td rowspan="2">90210</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>Johnson</td>
        <td>22</td>
        <td>Male</td>
      </tr>
      <tr>
        <td rowspan="3">2</td>
        <td>Carol</td>
        <td>Williams</td>
        <td>25</td>
        <td>Female</td>
        <td>456 Maple Rd., Othertown USA</td>
        <td>Othertown</td>
        <td>NY</td>
        <td>11235</td>
      </tr>
      <tr>
        <td>David</td>
        <td>Davis</td>
        <td>27</td>
        <td>Male</td>
        <td rowspan="2">789 Elm St., Anothercity USA</td>
        <td rowspan="2">Anothercity</td>
        <td rowspan="2">TX</td>
        <td rowspan="2">76051</td>
      </tr>
      <tr>
        <td>Emily</td>
        <td>Jones</td>
        <td>23</td>
        <td>Female</td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
    $(function () {
      $('#myDatagrid').datagrid({
        onLoadSuccess: function (data) {
          mergeRows('myDatagrid', 0, ['ID']);
        }
      });

      // Merge rows based on column names
      function mergeRows(datagridId, startIndex, fieldNames) {
        var datagrid = $('#' + datagridId);
        var rows = datagrid.datagrid('getRows');
        var mergeCells = [];
        var fieldName;
        var rowspan;
        var i;
        var j;
        var curFieldValue;
        var nextFieldValue;
        var thisRow;
        var nextRow;
        var skipRows = 0;
        var rowSpanIndex;

        for (i = startIndex; i < rows.length; i++) {
          thisRow = rows[i];
          nextRow = (i + 1 < rows.length) ? rows[i + 1] : {};

          for (j = 0; j < fieldNames.length; j++) {
            fieldName = fieldNames[j];

            if (skipRows > 0) {
              mergeCells.push({ index: i, field: fieldName, rowspan: rowspan });

              if (j === fieldNames.length - 1) {
                skipRows--;
              }

              continue;
            }

            curFieldValue = thisRow[fieldName];
            nextFieldValue = nextRow[fieldName];

            if (curFieldValue !== nextFieldValue) {
              mergeCells.push({ index: i, field: fieldName, rowspan: 1 });
            } else {
              rowSpanIndex = mergeCells.findIndex(function (elem) {
                return elem.index === i - 1 && elem.field === fieldName;
              });

              if (rowSpanIndex !== -1) {
                rowspan = mergeCells[rowSpanIndex].rowspan + 1;
                mergeCells[rowSpanIndex].rowspan = rowspan;
                skipRows = rowspan - 1;

                if (j === fieldNames.length - 1) {
                  skipRows--;
                }
              } else {
                mergeCells.push({ index: i, field: fieldName, rowspan: 2 });
              }
            }
          }
        }

        datagrid.datagrid('mergeCells', {
          index: mergeCells[0].index,
          field: mergeCells[0].field,
          rowspan: mergeCells[0].rowspan
        });

        for (i = 1; i < mergeCells.length; i++) {
          rowIndex = mergeCells[i].index;
          fieldName = mergeCells[i].field;
          rowspan = mergeCells[i].rowspan;

          if (rowspan > 1) {
            datagrid.datagrid('mergeCells', {
              index: rowIndex,
              field: fieldName,
              rowspan: rowspan
            });

            for (j = rowIndex + 1; j < rowIndex + rowspan; j++) {
              var tr = datagrid.datagrid('getRowDom', j);
              tr.addClass('merged-row');
            }
          }
        }
      }
    });
  </script>
</body>

</html>

    在上述代码中，我们首先引入了 EasyUI 相关的 CSS 和 JavaScript 文件，在页面中定义了一个包含多行和多列的复杂表格，其中一些行和列需要进行单元格合并。我们使用了 rowspan 和 colspan 属性来指定需要合并的单元格。在实际应用中，这些数据应该是通过 JavaScript 代码动态生成而来。

    然后，我们使用 EasyUI 的 datagrid 组件来渲染这个表格，并在 onLoadSuccess 事件触发后调用 mergeRows 函数，实现单元格的合并操作。

    mergeRows 函数的实现非常复杂，主要功能是基于某个或多个列名，动态地合并单元格。首先，我们使用 EasyUI 提供的 API 获取所有行数据，并准备好一个空数组 mergeCells 用于存储合并单元格的信息。然后，针对每一列，我们通过逐行比较来判断单元格是否需要合并。如果需要合并，则将相邻单元格的行数进行累加。如果不需要合并，则将当前单元格作为一个新的合并单元格进行存储。

    最后，我们使用 EasyUI 提供的 mergeCells 方法，遍历 mergeCells 数组，依次合并单元格。注意，在对单元格进行合并时，我们使用了 addClass 方法为合并后的单元格添加 merged-row 类，以便为合并后的单元格设置样式。

    通过上述代码，我们就可以在 HTML 页面中使用 EasyUI 的 datagrid 实现合并单元格的复杂表格。需要注意的是，在实际应用中，我们应该根据实际需要进行样式的调整，以便更好地展示数据。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

  • 【前端】easyui的datagrid组件常用功能
    2022-08-09 17:32
    候补码农的博客 easyui datagrid 数据表格
  • easyui datagrid Excel导出
    2022-05-13 16:55
    总结来说，“easyui datagrid Excel导出”是一个结合了前端技术与后端服务的功能实现，涉及到EasyUI组件操作、数据处理、文件下载和浏览器兼容性等多个方面的知识。通过这个功能，用户可以更便捷地管理和分享基于...
  • wpf datagrid控件
    2017-12-02 22:45
    - **报表和分析工具**：提供数据表格视图，支持排序、过滤和聚合操作。 - **数据库前端**：为数据库查询结果提供一个直观的界面。 - **配置工具**：用于设置系统参数和配置信息。 总的来说，这个自定义的WPF ...
  • easyui-datagrid数据获取[项目代码]
    2025-11-25 06:00
    在实际项目中，使用easyui-datagrid不仅可以简化前端的表格数据处理逻辑，还可以通过其提供的丰富API快速实现复杂的功能。这种灵活性和强大功能，使得easyui-datagrid成为很多Web应用开发者的首选表格组件。 此外，...
  • datagrid合并单元格
    2014-09-23 13:02
    在IT领域，特别是前端开发和数据展示中，`datagrid`是一种常见的组件，用于展示结构化的数据，类似于电子表格。在处理复杂数据时，有时我们需要对`datagrid`中的单元格进行合并，以达到更好的视觉效果和信息组织。这...
  • 报表及前端插件整理
    2015-01-31 10:05
    白天吃黑片的博客 本文要点： 1.FusionCharts图表控件介绍 ...2.ReportAll报表控件介绍 3.Grid++Report报表控件介绍 4.网页文本编辑器 5.上传文件控件介绍 源代码目录结构： 1.FusionCharts图表控件介绍 Fu
  • 前端三方库零碎（持续更新）
    2024-07-26 20:34
    LoserChaser的博客 本文主要记录开发实践过程中遇到的前端库，做个记录总结，以备不时之需。
  • 中国报表工具的前世今生
    2024-11-22 14:13
    SPL开源社区的博客 说到报表，很多人第一时间会想到财务报表，但此报表非彼报表，这里说的报表范围更广。各行业应用中呈现的各类图表都是报表，财务报表只是其中的一小部分。报表工具，顾名思义，就是用来做报表的工具了。那么有同学会...
  • dataGrid 多维表头、表头跨行跨列设计及绑定数据
    2020-10-27 19:45
    实现多维表头和表头跨行跨列后，展示数据时会更加直观和易于阅读，尤其适用于展示复杂的数据关系，例如报表数据。这种方法提高了数据展示的灵活性和用户体验。 在学习和实施过程中，读者应该注意对HTML代码和服务器...
  • 报表基础（打印报表）
    2008-05-20 18:32
    水晶报表是由SAP公司开发的一款强大的报表工具，它允许开发者创建复杂的数据报表，可以从多种数据源获取数据，包括数据库、XML文件、Excel表格等。在“打印报表”这一主题中，水晶报表提供了灵活的打印选项，用户...
  • EasyUI的DataGrid直接导出Excle(也可适用于多级标题栏)
    2018-09-20 11:26
    云怀的博客 在实际生产生活开发过程中，我们经常需要“报表”，所以很多人都喜欢用EasyUI、BootStrap等前端框架进行报表呈现，报表呈现又存在需要导出Excle文档的基本功能，我在我现在的公司，发现之前的代码，导出Excle，并不...
  • 46个ASP.NET学习大全(包括水晶报表、验证码、水印、MVC、Web服务)
    2013-05-18 09:29
    1. **水晶报表 (Crystal Reports)**：水晶报表是一种强大的报告生成工具，常用于ASP.NET应用程序中，用于设计复杂的业务报告。它可以连接到多种数据源，包括数据库、Excel表格和文本文件，生成交互式报表，支持...
  • JavaWeb开发技术方案宝典--报表打印方案（报表打印方案要点代码）
    2009-07-11 17:24
    3. **JavaServer Faces (JSF)**: JSF是一个用于构建Web界面的MVC框架，其组件库通常包含一些用于报表展示的组件，如Datagrid或DataTable。通过JSF，开发者可以轻松地将后台数据绑定到前端报表，实现动态更新。 4. *...
  • JeeSite 4.x and 5.x快速开发平台前端技术探索与实践
    2024-05-28 12:35
    前端组件开发的博客 JeeSite 快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，后端基于经典组合 Spring Boot、Shiro、MyBatis，前端采用 Beetl、Bootstrap、AdminLTE 经典开发模式，或者分离版 Vue3、Vite、...
  • jQuery EasyUI 数据网格 - 创建列组合
    2025-12-17 10:34
    likuolei的博客 jQuery EasyUI 数据网格支持通过列组合（Column Group）功能创建多级表头，适用于复杂数据展示。可通过嵌套数组或 colspan 属性实现分组，如销售报表和学生成绩表。关键步骤包括引入资源、定义分组结构（使用 ...
  • DBA开发PC和手机报表解决方案及实践
    2021-07-22 22:20
    咏方舟【长江支流】的博客 DBA开发PC和手机报表解决方案及Step By Step实践 作者：长江支流 ​“只写一个数据库的结构化查询SQL语句，因为这是绝大部分企业的信息中心数据库管理员DBA都会做的事情。但是，他们虽然精通数据库但并不是程序员...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 6月3日
  • 已采纳回答 5月26日
  • 创建了问题 5月26日