在数据表格中展示汇总信息是常见需求。本文介绍通过 jQuery EasyUI 的 showFooter 属性，在数据网格底部添加页脚摘要行的具体方法。掌握数据格式配置与表格初始化步骤，即可快速实现统计行展示。

启用页脚显示功能

要在数据网格底部显示摘要行，核心是启用 showFooter 属性。该属性控制是否渲染页脚区域，默认值为 false。启用后，数据网格会自动读取数据源中的 footer 字段并渲染为独立行。

页脚行与普通数据行采用相同的渲染机制，支持多行摘要展示。可根据业务需求在页脚中显示总计、平均值或其他统计指标。

页脚数据格式规范

页脚数据需与常规数据一同返回，采用标准 JSON 格式。数据源必须包含 footer 数组，每个对象对应一行摘要信息。字段名需与表格列定义保持一致，确保数据正确映射。

示例数据结构如下：

{
  "total": 1,
  "rows": [
    {"id": 1, "name": "Chai", "price": 18.00}
  ],
  "footer": [
    {"name": "Total", "price": 18.00}
  ]
}

其中 rows 数组存放明细数据，footer 数组存放摘要数据。total 字段表示总记录数，用于分页计算。页脚对象中的字段值将直接显示在对应列中。

完整实现代码

通过 HTML 标记初始化数据网格时，需设置 showFooter 为 true。以下示例展示完整配置：

    

        

            
Product Name
            
Unit Price
        
    

关键配置说明：

• showFooter="true"：启用页脚显示
• url：指定数据源路径，返回包含 footer 的 JSON
• fitColumns="true"：列宽自适应容器
• rownumbers="true"：显示行号列

表格初始化后，数据网格会自动请求指定 URL 的数据，并将 footer 数组内容渲染为页脚行。页脚行样式与数据行保持一致，可通过 CSS 自定义外观。

使用注意事项

页脚摘要功能依赖正确的数据格式。确保服务端返回的 JSON 包含 footer 字段，且字段名与表格列定义匹配。若 footer 数组为空或未定义，页脚区域将不会显示。

页脚行支持多行展示，可在 footer 数组中添加多个对象。每个对象对应一行摘要，适用于需要展示多项统计指标的场景。页脚数据不会参与排序和筛选操作，仅用于展示目的。

实际应用中，页脚摘要常用于价格总计、数量汇总等场景。结合 EasyUI 的 formatter 功能，可对页脚数据进行格式化显示，如添加货币符号或千位分隔符。