以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 创建页脚摘要（Footer Summary）”的专业回答。我将详细讲解 jQuery EasyUI 中数据网格（DataGrid）如何创建页脚摘要，包括实现方法、配置选项和应用场景，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新版本为参考。

jQuery EasyUI 数据网格 – 创建页脚摘要（Footer Summary）

目录

  1. 引言
  2. 页脚摘要概述
  1. 创建基础页脚摘要
  1. 高级页脚摘要配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）支持在表格底部添加页脚摘要（Footer Summary），用于显示数据的统计信息，如总数、平均值等。本教程将从基础到高级，带你掌握如何为 DataGrid 创建页脚摘要，并提供实用示例。

2. 页脚摘要概述

2.1 什么是页脚摘要？

  • 定义：页脚摘要是 DataGrid 的一个功能，通过在表格底部添加一行或多行，展示数据的汇总信息。
  • 实现方式：使用 footer 数据和 showFooter: true 配置。

2.2 页脚摘要的应用场景

  • 数据统计：显示列的总和、平均值或计数。
  • 财务报表：汇总金额或数量。
  • 参考：jQuery EasyUI 官方文档 DataGrid 部分（jeasyui.com/documentation）。

3. 创建基础页脚摘要

3.1 准备工作

  • 引入依赖：需要 jQuery 和 EasyUI 的核心文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 实现页脚摘要

  • 方法：
  1. 设置 showFooter: true 启用页脚。
  2. 在数据中添加 footer 属性，定义页脚行。
  • 示例：
<table id="dg" class="easyui-datagrid" data-options="showFooter: true">
  <thead>
    <tr>
      <th data-options="field:'id'">ID</th>
      <th data-options="field:'amount'">金额</th>
    </tr>
  </thead>
</table>
<script>
$('#dg').datagrid({
  data: {
    rows: [
      { id: 1, amount: 100 },
      { id: 2, amount: 200 }
    ],
    footer: [
      { id: '总计', amount: 300 }
    ]
  }
});
</script>

3.3 实例：基础页脚摘要

以下是一个基础页脚摘要的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 基础页脚摘要</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    .container { max-width: 600px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>基础页脚摘要</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
           data-options="
             showFooter: true,
             rownumbers: true,
             singleSelect: true">
      <thead>
        <tr>
          <th data-options="field:'id',width:100">订单ID</th>
          <th data-options="field:'name',width:200">订单名称</th>
          <th data-options="field:'amount',width:100,align:'right'">金额</th>
        </tr>
      </thead>
    </table>
  </div>
  <script>
    // 数据和页脚
    var data = {
      rows: [
        { id: 1, name: '订单 1', amount: 100 },
        { id: 2, name: '订单 2', amount: 200 },
        { id: 3, name: '订单 3', amount: 300 }
      ],
      footer: [
        { id: '总计', name: '汇总', amount: 600 }
      ]
    };
    $('#dg').datagrid('loadData', data);
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示一个包含 3 行数据的网格，底部页脚显示“总计”行，金额汇总为 600。

4. 高级页脚摘要配置

4.1 动态计算页脚数据

  • 方法：使用 onLoadSuccess 事件动态计算并更新页脚。
  • 示例：
$('#dg').datagrid({
  onLoadSuccess: function(data) {
    var rows = data.rows;
    var totalAmount = rows.reduce((sum, row) => sum + row.amount, 0);
    $(this).datagrid('reloadFooter', [{ id: '总计', amount: totalAmount }]);
  }
});

4.2 服务器端页脚摘要

  • 方法：服务器返回数据时包含 footer 字段。
  • 示例后端（PHP）：
echo json_encode([
  'rows' => [...],
  'footer' => [['id' => '总计', 'amount' => 总金额]]
]);

4.3 实例：动态服务器端页脚摘要

以下是一个动态计算并结合服务器端数据的页脚摘要示例：

前端代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 动态服务器端页脚摘要</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    .container { max-width: 600px; margin: 20px auto; }
    .datagrid-footer { font-weight: bold; }
  </style>
</head>
<body>
  <div class="container">
    <h1>动态服务器端页脚摘要</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
           data-options="
             url: 'get_data.php',
             showFooter: true,
             rownumbers: true,
             singleSelect: true,
             onLoadSuccess: function(data) {
               var rows = data.rows;
               var totalAmount = rows.reduce((sum, row) => sum + row.amount, 0);
               var avgAmount = totalAmount / rows.length;
               $(this).datagrid('reloadFooter', [
                 { id: '总计', name: '汇总', amount: totalAmount },
                 { id: '平均', name: '平均值', amount: avgAmount.toFixed(2) }
               ]);
             }">
      <thead>
        <tr>
          <th data-options="field:'id',width:100">订单ID</th>
          <th data-options="field:'name',width:200">订单名称</th>
          <th data-options="field:'amount',width:100,align:'right'">金额</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

后端代码（get_data.php）

<?php
header('Content-Type: application/json');
echo json_encode([
  'total' => 5,
  'rows' => [
    ['id' => 1, 'name' => '订单 1', 'amount' => 100],
    ['id' => 2, 'name' => '订单 2', 'amount' => 200],
    ['id' => 3, 'name' => '订单 3', 'amount' => 300],
    ['id' => 4, 'name' => '订单 4', 'amount' => 400],
    ['id' => 5, 'name' => '订单 5', 'amount' => 500]
  ]
]);
?>
  • 运行方法：
  1. 将 HTML 保存为 index.html，PHP 保存为 get_data.php。
  2. 使用本地服务器（如 XAMPP）运行，确保 PHP 环境可用。
  • 效果：显示一个包含 5 行数据的网格，底部页脚显示两行：
  • “总计”行：金额总和 1500。
  • “平均”行：平均金额 300.00。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 样式突出：为页脚添加粗体或背景色（如 .datagrid-footer），增强可读性。
  • 多行页脚：根据需求展示多个统计指标（如总和、平均值）。

5.2 性能优化与调试

  • 性能：动态计算时避免复杂逻辑，优先在服务器端汇总大数据。
  • 调试：使用浏览器开发者工具检查页脚数据和样式。

6. 结论

jQuery EasyUI 的数据网格通过 showFooter 和 footer 数据提供了创建页脚摘要的便捷方式，适用于统计和汇总场景。本文通过基础和高级示例展示了实现过程，帮助你快速上手。如果需要条件高亮，可参考 条件设置行背景颜色 或访问 jQuery EasyUI 官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从静态页脚到动态服务器端计算，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 创建基础页脚摘要。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 基础示例直接保存为 HTML 文件打开即可；高级示例需配置本地服务器运行 PHP 文件。