Фильтр JSON данных в пользовательском форматере - PullRequest
Новая
       6

Фильтр JSON данных в пользовательском форматере

0 голосов
/ 24 марта 2020

Я вполне уверен, что это возможно с помощью 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» и т. д.

Ответы [ 2 ]

1 голос
/ 31 марта 2020

Я не думаю, что столбец сумм это все, что желательно, я думаю, что вы хотели бы, чтобы ряд сумм в верхней / нижней части таблицы. В любом случае я предоставлю вам оба способа просмотра.

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

Calcs столбца табулятора

Используйте параметр bottomCal c или topCal c в определении столбца. Это для столбца объема. 

  {
    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;
    }
0 голосов
/ 10 апреля 2020

Если вы хотите, чтобы столбец основывался на расчете значения других столбцов, вам необходимо рассмотреть использование 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}

Если вы манипулируете данными, вы всегда должны использовать мутатор , поскольку он изменяет сами данные, что означает, что столбец будет сортироваться правильно. если вы используете форматер , который является чисто визуальным эффектом и означает, что вы не сможете сортировать или фильтровать столбец.

...