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     }

需要统计合计列方法

区别仅在于新的返回有了totalRow（合计列）。

后台弄完了，前端的就很简单啦。

步骤四、

1、表格的render加上tatalRow : true

 2、在统计列的前面加上想要显示的文字。 totalRowText : 'xxxx'

步骤五、

重启刷新页面。合计列就显示在下面啦，平均数或者其他逻辑也是OK的。

大功告成~

写这篇随笔的目的，当初为了做这个某度找了半天啥也没有，都是当前页数据的。google英文有时候也看不太懂，所以最后还是看官方文档一步步来，慢慢摸索。关键时候官方文档还是比较靠谱的。

希望对大家有帮助哈，写的比较乱，文章有问题可以指出。

出现相关问题欢迎咨询我哈。可以评论回复

祝工作生活俩愉快~

这篇关于LAYUI表格合计列,统计所有数据合计的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！