在自定义格式化程序中筛选JSON数据

Question

我很确定这在Tabulator中是可能的，但我的JS知识非常有限。

我想过滤解析到我的表中的JSON数据，这样它就可以汇总在一起，提供一个"；基于计算的"；柱我的数据如下：

{'id': '1' ,'date': "3/20" ,'type': 'API2' ,'volume': 14000 ,'price': 119000,'color': '#FFFFFF'},
{'id': '2' ,'date': "3/20" ,'type': 'API2' ,'volume': 500 ,'price': 119000,'color': '#FFFFFF'},
{'id': '3' ,'date': "4/20" ,'type': 'API2' ,'volume': 9000 ,'price': 129000,'color': '#FFFFFF'},
{'id': '4' ,'date': "3/20" ,'type': 'API4' ,'volume': 50000 ,'price': 119000 ,'color': '#FFFFFF'},
{'id': '5' ,'date': "3/20" ,'type': 'API4' ,'volume': 1000 ,'price': 109000 ,'color': '#FFFFFF'},
{'id': '6' ,'date': "4/20" ,'type': 'API4' ,'volume': 13000 ,'price': 119000 ,'color': '#FFFFFF'},
{'id': '7' ,'date': "3/20" ,'type': 'API6' ,'volume': 14000 ,'price': 119000 ,'color': '#FFFFFF'},

我的专栏(显然是不完整的(看起来像：

{
id: '1', 
title: 'Volume',
formatter: function(cell){
//Requires Help
},
editor: '', headerTooltip: '', align: 'center', sorter: '', script_name: '', 
script_parameter: '', headerFilter: '', headerFilterPlaceholder: '', 
headerSort: false, frozen: false, resizable: false, minWidth: 35, 
editorParams: {values:[]}
}

我希望该列如何操作的一个例子是对符合特定标准的所有记录的所有卷值求和，可能类型为"API2"，或者日期为"3/20"，依此类推

Answer 1

我不认为一列总和是那么理想，我认为你想要的是在表的顶部/底部有一行总和。无论哪种方式，我都会提供两种方式供您查看。

https://jsfiddle.net/s60qL1hw/-包含以下所有示例。

创建一列总和

您需要首先获取表数据，然后在此基础上创建过滤器/总和。

下面是一个格式化程序示例，用于创建类型为"API2"的卷的总和。

formatter: function(cell) {
const tableData = cell.getTable().getData();
let mySum = 0;
for (let i = 0; i < tableData.length; i++){
if (tableData[i].type === 'API2'){
mySum += tableData[i].volume;
}
}
return mySum;
}

表格列计算

在列定义中使用"底部计算"或"顶部计算"选项。这是针对体积列的。

{
title: "Volume",
field: 'volume',
bottomCalc: 'sum'
}

也可以使用自定义函数进行计算。(我在这里没有使用calcParams，但你可以在文档中看到它们是如何使用的。(

bottomCalc: function (values, data, calcParams){
let mySum = 0;
for (let i = 0; i < values.length; i++){
if (data[i].type === 'API2'){
mySum += values[i];
}
}
return mySum;
}

Answer 2

如果您想要一个基于其他列值计算的列，那么您需要考虑使用Mutator

如果我们假设您有第三列，您希望保存val1和val2列的和的值，则定义如下：

var sumMutator= function(value, data, type, params, component){
//value - original value of the cell
//data - the data for the row
//type - the type of mutation occurring  (data|edit)
//params - the mutatorParams object from the column definition
//component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column
return data.val1 + data.val2;
}
{title:"Sum Column", field:"sumcol", mutator:sumMutator}

如果您正在操作数据，您应该始终使用mutator来更改数据本身，这意味着列将正确排序。如果使用格式化程序，这纯粹是一种视觉效果，意味着您将无法对列进行排序或筛选。