javascript - 在自定义格式化程序中过滤 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;
    }

制表符列计算

在列定义中使用bottomCalc 或topCalc 选项。这是针对音量列的。

  {
    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;
    }