news 2026/7/7 5:44:22

jQuery EasyUI 数据网格 - 列运算

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 数据网格 - 列运算

下面直接给你最实用、最常见的列运算(calculated column + 底部合计统计)方法,jQuery EasyUI datagrid 支持超级好,复制粘贴就能用,领导最爱的“单价*数量=金额自动计算 + 底部总金额/平均值”全都有!

方法1:行内计算列(比如金额 = 单价 × 数量,编辑时自动计算)
结合行内编辑,超级实用!

<tableid="dg"class="easyui-datagrid"title="列运算 + 底部合计"style="width:800px;height:400px"data-options="url:'data.json', singleSelect:true, fitColumns:true, pagination:true, showFooter:true, onClickRow:onClickRow, onEndEdit:onEndEdit"><thead><tr><thdata-options="field:'id',width:60">ID</th><thdata-options="field:'name',width:120">商品名称</th><thdata-options="field:'price',width:100,align:'right',editor:{type:'numberbox',options:{precision:2}}">单价</th><thdata-options="field:'quantity',width:100,align:'right',editor:{type:'numberbox',options:{precision:0,min:1}}">数量</th><thdata-options="field:'amount',width:120,align:'right', formatter:function(value,row){return (row.price*row.quantity).toFixed(2);}">金额(自动计算)</th></tr></thead></table><script>// 行内编辑核心(和之前一样)vareditIndex=undefined;functionendEditing(){if(editIndex==undefined){returntrue}if($('#dg').datagrid('validateRow',editIndex)){$('#dg').datagrid('endEdit',editIndex);editIndex=undefined;returntrue;}else{returnfalse;}}functiononClickRow(index){if(editIndex!=index){if(endEditing()){$('#dg').datagrid('selectRow',index).datagrid('beginEdit',index);editIndex=index;}else{$('#dg').datagrid('selectRow',editIndex);}}}// 编辑结束时自动计算金额functiononEndEdit(index,row,changes){if(changes.price||changes.quantity){row.amount=(row.price||0)*(row.quantity||1);$('#dg').datagrid('refreshRow',index);// 可选:更新底部合计updateFooter();}}// 加载成功后计算底部合计functionupdateFooter(){varrows=$('#dg').datagrid('getRows');vartotalAmount=0;vartotalQuantity=0;$.each(rows,function(i,row){totalAmount+=(row.price||0)*(row.quantity||1);totalQuantity+=(row.quantity||1);});varavgPrice=totalQuantity?(totalAmount/totalQuantity).toFixed(2):0;$('#dg').datagrid('reloadFooter',[{name:'<b>合计</b>',price:'',quantity:totalQuantity,amount:totalAmount.toFixed(2)+' (平均单价: '+avgPrice+')'}]);}$(function(){$('#dg').datagrid({onLoadSuccess:function(){updateFooter();}});});</script>

效果:编辑单价或数量时,金额列自动计算并刷新;底部固定显示“合计”行,总金额 + 平均单价,超级专业!

方法2:纯客户端动态追加“合计”行(不依赖后台footer)
适合本地数据或不想改后台的情况。

functioncompute(columnField){varrows=$('#dg').datagrid('getRows');vartotal=0;for(vari=0;i<rows.length;i++){total+=parseFloat(rows[i][columnField]||0);}returntotal.toFixed(2);}$('#dg').datagrid({onLoadSuccess:function(){$(this).datagrid('appendRow',{name:'<span style="font-weight:bold;">合计</span>',amount:'<span style="font-weight:bold;">'+compute('amount')+'</span>'});}});

方法3:后台直接返回footer(最省事,如果能改后台)
后台JSON格式:

{"total":20,"rows":[/* 数据行 */],"footer":[{"name":"合计","amount":99999.99}]}

前端只需加showFooter:true,自动显示底部合计!

你现在直接复制方法1到你的页面,刷新就能看到列运算 + 底部合计效果了!
结合之前的复选框 + 分页 + 行内编辑 + 扩展编辑器,完美财务/订单报表就齐活了。

想要我给你一个完整的HTML示例(带远程数据 + 多列运算 + 总计/平均/最大值 + 保存到服务器)?
或者你告诉我你想计算什么(比如“成本 = 单价数量折扣”、“选中行合计”),我2分钟发你完整代码,复制就能跑!

快说说你现在的需求(比如“要分组统计”或“分页时每页合计”),我手把手帮你搞定,5分钟内看到完美列运算效果!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/7 19:55:59

用gtest快速验证算法原型的方法

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个算法原型验证项目&#xff0c;使用gtest快速测试算法实现。要求&#xff1a;1) 实现一个简单算法(如排序或搜索) 2) 编写对应的gtest测试用例 3) 包含性能测试 4) 支持参数…

作者头像 李华
网站建设 2026/7/7 6:13:16

PCB钻孔工艺的未来趋势如何?

【问】当前 PCB 钻孔工艺的发展瓶颈是什么&#xff1f;【答】随着 5G、人工智能、汽车电子等领域的发展&#xff0c;PCB 产品朝着高密度、高多层、高可靠性的方向升级&#xff0c;钻孔工艺面临三大瓶颈&#xff1a;第一&#xff0c;精度瓶颈&#xff1a;HDI 板和芯片载板需要加…

作者头像 李华
网站建设 2026/7/7 9:53:10

AI助力VMware17下载与配置:一键解决环境搭建难题

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个智能VMware17下载助手应用&#xff0c;功能包括&#xff1a;1.自动检测用户操作系统类型和硬件配置 2.根据分析结果推荐最适合的VMware17版本 3.提供官方安全下载链接 4.生…

作者头像 李华
网站建设 2026/7/7 11:59:00

1小时搭建虚拟线程原型:快马平台极速验证方案

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 快速开发一个虚拟线程原型系统&#xff0c;验证电商秒杀场景的可行性。功能要求&#xff1a;1. 模拟10000并发抢购 2. 使用虚拟线程处理请求 3. 实现简单的库存管理 4. 记录请求处理…

作者头像 李华
网站建设 2026/7/6 16:42:18

Seafile在教育行业的5个创新应用场景解析

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个教育机构专用的Seafile扩展模块&#xff0c;包含&#xff1a;1.课程资料分类系统 2.作业提交与批改功能 3.学术论文协作空间 4.视频教学资源转码服务 5.学生账号批量导入工…

作者头像 李华
网站建设 2026/7/7 19:30:07

Unitask在远程团队协作中的实际应用案例

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个团队版Unitask协作平台&#xff0c;包含&#xff1a;1.团队任务看板 2.个人专注状态显示 3.智能任务分配 4.深度工作时段同步 5.团队效率分析报告。前端使用Vue3TypeScript…

作者头像 李华