其他分享
首页 > 其他分享> > LAYUI表格合计列,统计所有数据合计

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