LAYUI表格合計列,統計所有數據合計

本文轉載自查看原文 2020-11-06 10:49 3409

背景：項目要求數據統計表增加合計列。

環境：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

步驟二、

回到自己統計數據返回的實現類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     }

需要統計合計列方法

@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