LAYUI表格合计列,统计所有数据合计
作者:互联网
背景:项目要求数据统计表增加合计列。
环境:springboot layui2.5.5。
期望:合计统计所有数据合计而不是当前数据表格数据合计。
重中之重:官网文档上写的很清楚,1.5.5是仅支持合计当前页数据,意义不大。但年初layui更新的版本支持了所有列合计。
所以有俩种方案
1、自己去重写之前版本的合计列获取与加载方法
2、升级layui版本。技术方面权衡了下我选择了后者
话不多说,直接上步骤吧。
1、查看官网具体说明和对应案例
2、仔细找了下,好像这个没有最新的案例,回到自己表格返回数据的方法。
步骤一、
项目完整性,不改变之前的返回封装,新建自己的类继承之前的类。
/** * 创建于:2020-11-06<br> * 合计栏数据返回结果 * 用于表格合计栏。layUI默认表格的前端计算只支持当前页数据,故在接口返回合计数据。 * * @author TangBin * @version 1.0.0 */ public class TotalTestRes extends TestRes { /** * 合计栏数据 */ private Object totalRow; public Object getTotalRow() { return totalRow; } public void setTotalRow(Object totalRow) { this.totalRow = totalRow; } /** * 扩展构造方法 * * @param data 数据 * @param code code * @param count 数据行 * @param totalRow 合计列数据 */ public TotalTestRes(Object data, int code, int count, Object totalRow) { this.setData(data); this.setCode(code); this.setCount(count); this.totalRow = totalRow; } }
步骤二、
回到自己统计数据返回的实现类TestServiceImpl。
之前获取分页数据的方法getPage(),返回的是Page<TestBean>。
现在需要新增一个获取统计行数据的方法getTotalInfo。返回的数据类型是TestBean.
步骤三、
Controller重新组装数据
原来组装的方法
1 @GetMapping(value = "/list") 2 public EbsResult list(TestQuery query) { 3 PageBean<BillRateVO> pageBean = testService.getPage(queryBean); 4 return new TestRes(pageBean.getData(), TestRes.PAGE_CODE, (int)pageBean.getTotalRecords()); 5 }
需要统计合计列方法
1 2 3 4 5 |
@GetMapping (value = "/list" )
public EbsResult list(TestQuery query) {
PageBean<BillRateVO> pageBean = testService.getPage(query);
return new TestRes(pageBean.getData(), TestRes.PAGE_CODE, ( int )pageBean.getTotalRecords(), testService.getTotalInfo(query));
}
|
区别仅在于新的返回有了totalRow(合计列)。
后台弄完了,前端的就很简单啦。
步骤四、
1、表格的render加上tatalRow : true
2、在统计列的前面加上想要显示的文字。 totalRowText : 'xxxx'
步骤五、
重启刷新页面。合计列就显示在下面啦,平均数或者其他逻辑也是OK的。
大功告成~
写这篇随笔的目的,当初为了做这个某度找了半天啥也没有,都是当前页数据的。google英文有时候也看不太懂,所以最后还是看官方文档一步步来,慢慢摸索。关键时候官方文档还是比较靠谱的。
希望对大家有帮助哈,写的比较乱,文章有问题可以指出。
出现相关问题欢迎咨询我哈。可以评论回复
祝工作生活俩愉快~
标签:表格,LAYUI,Object,pageBean,totalRow,合计,数据,public 来源: https://www.cnblogs.com/antcorps/p/15400396.html