在自定义格式化程序中过滤 JSON 数据答案

【问题标题】：Filter JSON Data In Custom Formatter在自定义格式化程序中过滤 JSON 数据
【发布时间】：2020-03-23 23:59:57
【问题描述】：

我相当肯定 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”等等。

【问题讨论】：

标签： javascript json tabulator

【解决方案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;
    }

【讨论】：

【解决方案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，因为它会更改数据本身，这意味着该列将正确排序。如果您使用的 formatter 纯粹是一种视觉效果，则意味着您将无法对列进行排序或过滤。

【讨论】：