背景：项目要求数据统计表增加合计列。
环境：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;
}
}
TotalTestRes.java
/**
* 创建于: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英文有时候也看不太懂，所以最后还是看官方文档一步步来，慢慢摸索。关键时候官方文档还是比较靠谱的。
希望对大家有帮助哈，写的比较乱，文章有问题可以指出。
出现相关问题欢迎咨询我哈。可以评论回复
祝工作生活俩愉快~