Layui 表格合计行：3 步搞定 totalRow 配置

Layui 表格合计行：3 步搞定 totalRow 配置

【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui

Layui 表格组件内置表格合计行功能。开启 totalRow 后，表格底部自动累加数字列，还支持自定义文本与模板，报表统计不用再手写循环。

功能速览：2 个层级、3 种列级取值

合计行配置分两层：表级负责开关，列级负责每列怎么统计。

列级布尔和字符串可以混用：同一张表里，积分列自动求和，ID 列显示"合计："，完全由各自配置决定。

三步上手

第 1 步：表级一行开启

在渲染参数里加一个totalRow: true，合计行立即出现。

table.render({ elem: '#test', url: '/api/list', totalRow: true // 开启合计行 });

第 2 步：配置列统计

只对需要统计的列加列级totalRow，其余列自动留空。

cols: [[ { field: 'id', title: 'ID', totalRow: '合计：' }, { field: 'experience', title: '积分', totalRow: true }, { field: 'sign', title: '签名', totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次' } ]]

第 3 步：验证效果

刷新页面，看表格底部多出的最后一行：积分列应显示各行之和，签名列显示模板渲染的文本。本地数据跑一遍 tests/visual/table.html 里的示例即可对照。

进阶玩法

合计行联动单元格编辑

给列加edit: 'text'后，用户改完数据，合计行会跟随变化。

• 编辑成功统一走obj.update()，它会触发局部重渲染
• 重渲染时表格会重新执行一遍求和逻辑
• 不要在事件里手动改合计行的 DOM，避免和自动计算打架

table.on('edit(test)', function(obj){ obj.update({ [obj.field]: obj.value }); // 成功后合计自动重算 });

跨页总计走服务端

本地求和只统计当前页数据。需要全量总计时，让后端把结果随接口返回。

• 响应里带totalRow字段（对应response.totalRowName），值为各字段的总计
• 列级模板引用d.TOTAL_ROW.字段名输出
• 服务端值优先于本地求和，两者不冲突

// 服务端 res: { totalRow: { experience: 12345 } } { field: 'experience', title: '积分', totalRow: '{{= d.TOTAL_ROW.experience }}' }

避坑指南

参数速查

延伸文档

• tests/visual/table.html：表格功能演示页，含合计行示例数据
• src/components/table.js：合计行渲染与求和的源码实现

现在就在你的 table.render 里加上totalRow: true，给数据表配上合计行。

【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui