我正在尝试从页面到页面累积添加来自bottomCalc的值。 BottomCalc 仅添加当前显示行的值。
{ title: $t('table.amount'), field: 'amount', headerHozAlign: 'center', hozAlign: 'center', formatter: "money", bottomCalc: "sum", },
这是我在组件页面中传递给制表器的列信息。我不知道如何编写一个函数来累计计算bottomCalc总和,逐页累加值。 我尝试搜索文档,找不到任何解决方案。
您可以使用自定义函数来计算每页上累积的总和,而不是使用
sum
的默认 bottomCalc
选项。在下面的示例中,我获取页面大小和当前页码来计算应计算多少行。然后将截至该点的每一行的值相加。这样每页底部都会显示累计金额:
const tabledata = [
{ id: 1, fullName: 'Oli Bob', age: '12', color: 'red' },
{ id: 2, fullName: 'Mary May', age: '1', color: 'blue' },
{ id: 3, fullName: 'Christine Lobowski', age: '42', color: 'green' },
{ id: 4, fullName: 'John Smith', age: '30', color: 'red' },
{ id: 5, fullName: 'Tim Burton', age: '51', color: 'blue' },
{ id: 6, fullName: 'Sean Nimble', age: '72', color: 'green' },
{ id: 7, fullName: 'Kurt Roman', age: '16', color: 'red' },
{ id: 8, fullName: 'Evan Crawley', age: '8', color: 'blue' },
{ id: 9, fullName: 'Christine Lobowski', age: '22', color: 'green' },
{ id: 10, fullName: 'Kayla Martinez', age: '27', color: 'green' }
]
const accCalc = (values, data, calcParams) => {
const pageSize = table.getPageSize()
const pageNum = table.getPage()
const count = pageSize * pageNum
let sum = 0
values.forEach((value, index) => {
if (index < count) {
sum = sum + +value
}
})
return sum
}
const table = new Tabulator('#example-table', {
data: tabledata,
columns: [
{ title: 'Name', field: 'fullName' },
{ title: 'Age', field: 'age', bottomCalc: accCalc },
{ title: 'Favourite Color', field: 'color' }
],
pagination:true,
paginationSize:4
})
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>