当前位置：首页 > news >正文

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

news 2026/7/24 1:56:39

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

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

<tableid="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><thdata-options="field:'ck',checkbox:true"></th><thdata-options="field:'id',width:60">ID</th><thdata-options="field:'name',width:120">商品名称</th><thdata-options="field:'price',width:100,align:'right'">单价</th><thdata-options="field:'quantity',width:80,align:'right'">数量</th><thdata-options="field:'amount',width:120,align:'right', formatter:function(v,row){return (row.price*row.quantity).toFixed(2);}">金额</th></tr></thead></table><divid="tb"style="padding:5px;"><span>选中行合计金额：</span><spanid="selectedTotal"style="font-weight:bold;color:red;">0.00</span><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"plain="true"onclick="refreshSummary()">刷新摘要</a></div><script>// 更新页脚摘要函数functionupdateSummary(data){varrows=$('#dg').datagrid('getRows');vartotalQty=0;vartotalAmt=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();}// 选中变化时更新选中行合计functionupdateSelectedSummary(){varrows=$('#dg').datagrid('getChecked');varselectedAmt=0;$.each(rows,function(i,row){selectedAmt+=parseFloat(row.price||0)*parseInt(row.quantity||1);});$('#selectedTotal').text(selectedAmt.toFixed(2));}// 刷新摘要按钮functionrefreshSummary(){$('#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：多页分页时显示“全局总计”（跨页合计）
如果分页数据很多，想显示所有数据的总计（而非当前页）：

// 假设你有一个全局变量保存总计（从后台单独接口获取）varglobalTotal={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)}]);