jQuery EasyUI 数据网格 – 创建页脚摘要

下面直接给你最实用、最常见的页脚摘要（footer summary）方法，jQuery EasyUI datagrid 支持超级好，复制粘贴就能用，领导最爱的“底部显示总计、平均值、记录数、选中行合计”等专业报表效果全都有！

方法1：最简单最常用 – 前端客户端计算页脚摘要（推荐现在就用这个）
适合数据量不大或实时计算的情况。

<table id="dg" class="easyui-datagrid" title="页脚摘要示例" style="width:800px;height:400px"
    data-options="
        url:'data.json',
        fitColumns:true,
        pagination:true,
        rownumbers:true,
        showFooter:true,          <!-- 关键：开启底部页脚 -->
        singleSelect:false,
        onLoadSuccess:updateSummary
    ">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'id',width:60">ID</th>
            <th data-options="field:'name',width:120">商品名称</th>
            <th data-options="field:'price',width:100,align:'right'">单价</th>
            <th data-options="field:'quantity',width:80,align:'right'">数量</th>
            <th data-options="field:'amount',width:120,align:'right',
                formatter:function(v,row){return (row.price*row.quantity).toFixed(2);}">
                金额
            </th>
        </tr>
    </thead>
</table>

<div id="tb" style="padding:5px;">
    <span>选中行合计金额：</span><span id="selectedTotal" style="font-weight:bold;color:red;">0.00</span>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="refreshSummary()">刷新摘要</a>
</div>

<script>
// 更新页脚摘要函数
function updateSummary(data){
    var rows = $('#dg').datagrid('getRows');
    var totalQty = 0;
    var totalAmt = 0;

    $.each(rows, function(i, row){
        totalQty += parseInt(row.quantity || 0);
        totalAmt += parseFloat(row.price || 0) * parseInt(row.quantity || 1);
    });

    // 重新加载页脚（可以自定义显示内容）
    $('#dg').datagrid('reloadFooter', [
        {
            name: '<b style="color:#333;">合计</b>',
            quantity: '<b>' + totalQty + '</b>',
            amount: '<b>' + totalAmt.toFixed(2) + '</b>'
        },
        {
            name: '记录数：' + rows.length + ' 条',
            quantity: '平均单价：' + (totalQty ? (totalAmt/totalQty).toFixed(2) : '0.00')
        }
    ]);

    // 更新选中行合计
    updateSelectedSummary();
}

// 选中变化时更新选中行合计
function updateSelectedSummary(){
    var rows = $('#dg').datagrid('getChecked');
    var selectedAmt = 0;
    $.each(rows, function(i, row){
        selectedAmt += parseFloat(row.price || 0) * parseInt(row.quantity || 1);
    });
    $('#selectedTotal').text(selectedAmt.toFixed(2));
}

// 刷新摘要按钮
function refreshSummary(){
    $('#dg').datagrid('reload');
}

// 监听选中变化
$(function(){
    $('#dg').datagrid({
        onCheck: updateSelectedSummary,
        onUncheck: updateSelectedSummary,
        onCheckAll: updateSelectedSummary,
        onUncheckAll: updateSelectedSummary
    });
});
</script>

效果：

• 底部固定两行页脚：第一行显示“合计”数量和总金额，第二行显示记录数和平均单价
• 工具栏显示“选中行合计金额”，勾选行时实时更新
• 数据刷新或分页后自动重新计算

方法2：后台直接返回 footer 数据（最省事，推荐大项目用）
如果能改后台接口，直接在返回的JSON里加 footer 数组：

{
    "total": 150,
    "rows": [/* 正常数据行 */],
    "footer": [
        {
            "name": "<b>合计</b>",
            "quantity": "<b>1250</b>",
            "amount": "<b>98500.00</b>"
        },
        {
            "name": "平均单价：78.80"
        }
    ]
}

前端只需加 showFooter:true，无需写任何计算代码，自动显示！

方法3：多页分页时显示“全局总计”（跨页合计）
如果分页数据很多，想显示所有数据的总计（而非当前页）：

// 假设你有一个全局变量保存总计（从后台单独接口获取）
var globalTotal = {qty: 5000, amt: 400000};

$('#dg').datagrid('reloadFooter', [
    {name: '<b>当前页合计</b>', quantity: currentPageQty, amount: currentPageAmt.toFixed(2)},
    {name: '<b>全局总计</b>', quantity: globalTotal.qty, amount: globalTotal.amt.toFixed(2)}
]);

你现在直接复制方法1到你的页面，刷新一下就能看到超级专业的页脚摘要效果了！
结合之前的复选框 + 分页 + 行内编辑 + 列运算 + 合并单元格，你的报表已经可以直接交付领导验收了。

想要我给你一个完整的HTML示例（带远程数据 + 页脚摘要 + 选中合计 + 全局总计）？
或者你告诉我你想在页脚显示什么（比如“最大值”“最小值”“计数”“自定义文字”），我2分钟发你完整代码，复制就能跑！

快说说你现在的需求，我手把手帮你搞定，5分钟内看到完美页脚摘要效果！