熊掌号做网站推广的注意事项,软件开发一般多少钱,wordpress 视频自适应,做女装代理需要自建网站么下面直接给你最实用、最常见的**页脚摘要#xff08;footer summary#xff09;**方法#xff0c;jQuery EasyUI datagrid 支持超级好#xff0c;复制粘贴就能用#xff0c;领导最爱的“底部显示总计、平均值、记录数、选中行合计”等专业报表效果全都有#xff01;
方法…下面直接给你最实用、最常见的**页脚摘要footer summary**方法jQuery EasyUI datagrid 支持超级好复制粘贴就能用领导最爱的“底部显示总计、平均值、记录数、选中行合计”等专业报表效果全都有方法1最简单最常用 - 前端客户端计算页脚摘要推荐现在就用这个适合数据量不大或实时计算的情况。tableiddgclasseasyui-datagridtitle页脚摘要示例stylewidth:800px;height:400pxdata-optionsurl:data.json, fitColumns:true, pagination:true, rownumbers:true, showFooter:true, !-- 关键开启底部页脚 -- singleSelect:false, onLoadSuccess:updateSummarytheadtrthdata-optionsfield:ck,checkbox:true/ththdata-optionsfield:id,width:60ID/ththdata-optionsfield:name,width:120商品名称/ththdata-optionsfield:price,width:100,align:right单价/ththdata-optionsfield:quantity,width:80,align:right数量/ththdata-optionsfield:amount,width:120,align:right, formatter:function(v,row){return (row.price*row.quantity).toFixed(2);}金额/th/tr/thead/tabledividtbstylepadding:5px;span选中行合计金额/spanspanidselectedTotalstylefont-weight:bold;color:red;0.00/spanahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-reloadplaintrueonclickrefreshSummary()刷新摘要/a/divscript// 更新页脚摘要函数functionupdateSummary(data){varrows$(#dg).datagrid(getRows);vartotalQty0;vartotalAmt0;$.each(rows,function(i,row){totalQtyparseInt(row.quantity||0);totalAmtparseFloat(row.price||0)*parseInt(row.quantity||1);});// 重新加载页脚可以自定义显示内容$(#dg).datagrid(reloadFooter,[{name:b stylecolor:#333;合计/b,quantity:btotalQty/b,amount:btotalAmt.toFixed(2)/b},{name:记录数rows.length 条,quantity:平均单价(totalQty?(totalAmt/totalQty).toFixed(2):0.00)}]);// 更新选中行合计updateSelectedSummary();}// 选中变化时更新选中行合计functionupdateSelectedSummary(){varrows$(#dg).datagrid(getChecked);varselectedAmt0;$.each(rows,function(i,row){selectedAmtparseFloat(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:b1250/b,amount:b98500.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)}]);你现在直接复制方法1到你的页面刷新一下就能看到超级专业的页脚摘要效果了结合之前的复选框 分页 行内编辑 列运算 合并单元格你的报表已经可以直接交付领导验收了。想要我给你一个完整的HTML示例带远程数据 页脚摘要 选中合计 全局总计或者你告诉我你想在页脚显示什么比如“最大值”“最小值”“计数”“自定义文字”我2分钟发你完整代码复制就能跑快说说你现在的需求我手把手帮你搞定5分钟内看到完美页脚摘要效果