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

Question

我相当确定这可以通过 Tabulator 实现，但是我的 JS 知识非常有限。

我想过滤解析到我的 table 的 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

我认为一列求和不是那么令人满意，我认为您想要的是 table 的 top/bottom 处的一行求和。无论哪种方式，我都会提供两种方式供您查看。

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

正在创建一列总和。

您需要先获取 table 数据，然后您需要根据该数据创建 filter/sum。

这是一个示例格式化程序，它创建类型为 '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;
    }

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}

如果您正在操作数据，您应该始终使用变元，因为它会更改数据本身，这意味着该列将正确排序。如果您使用 formatter 这纯粹是一种视觉效果，意味着您将无法对列进行排序或过滤。

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

Filter JSON Data In Custom Formatter

javascript

json

tabulator