Как отображать данные разных столбцов в виде всплывающей подсказки в режиме поворота сетки ag?

Question

var ColDef = [{
    headerName: "colA",
    field: 'colA',
    rowGroup: true
  },
  {
    headerName: "colB",
    field: 'colB',
    pivot: true,
    enablePivot: true
  },
  {
    headerName: "colC",
    field: 'colC',
    rowGroup: true
  },
  {
    field: 'colD',
    aggFunc: 'first',
    valueFormatter: currencyFormatter,
    tooltip: function(params) {
      return (params.valueFormatted);
    },
  },
  {
    field: 'comment'
  },
  {
    field: 'colF'
  }
];
function currencyFormatter(params) {
  return params.value;
}

приведенный выше код взят из другого вопроса. он работает, но я хочу использовать другое поле «комментарий» в качестве подсказки к текущему «colD». Также это групповая и сводная agGrid, если это обычная сетка, это не проблема. Буду признателен за любые идеи для группы и центра agGrid?

Answer 1

просто используйте tooltipValueGetter

{
   field: 'message',
   headerName: 'Message',
   headerTooltip: 'Message',
   width: 110,
   filter: 'agSetColumnFilter',
   tooltipValueGetter: (params) =>  `${params.value} some text`
}

или просто используйте тот же метод для tooltipValueGetter

ОБНОВЛЕНИЕ:

Хорошо, я понял

но это тоже просто

Ag-сетка имеет свойство tooltipField - где вы можно выбрать любое поле из сетки

Например здесь - в столбце «спорт» я показываю всплывающую подсказку предыдущего столбца

Пример: https://plnkr.co/edit/zNbMPT5HOB9yqI08

OR

Вы можете легко манипулировать данными для каждого поля с помощью tooltipValueGetter со следующей конструкцией:

tooltipValueGetter: function(params) {  
  return `Country: ${params.data.country}, Athlete: ${params.data.athlete}, Sport: ${params.data.sport}`;
},

Пример: https://plnkr.co/edit/zNbMPT5HOB9yqI08

Результат:

ОБНОВЛЕНИЕ 2

Эй, чувак! Я не понимаю, что это неправильно

Я просто использовал ваш фрагмент кода и свое решение

И оно работает так, как вы хотите

Пример: https://plnkr.co/edit/zNbMPT5HOB9yqI08

ОБНОВЛЕНИЕ 3

Небольшая манипуляция, и я могу получить данные

{ field: 'gold', aggFunc: 'sum',
    tooltipValueGetter: function(params) {  
    var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
    return model.allLeafChildren[0].data.silver;
  },
},

Последний: https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview

Answer 2

    var ColDef = [{
        headerName: "colA",
        field: 'colA',
        rowGroup: true
      },
      {
        headerName: "colB",
        field: 'colB',
        pivot: true,
        enablePivot: true
      },
      {
        headerName: "colC",
        field: 'colC',
        rowGroup: true
      },
      {
        field: 'colD',
        aggFunc: 'last',
    tooltipValueGetter: commentTooltipValueGetter
      },
      {
        field: 'comment'
      },
      {
        field: 'colF'
      }
    ];


    function commentTooltipValueGetter(params) {
    const colB = params.colDef.pivotKeys[0];
    var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
    for (var i = 0; i < model.allLeafChildren.length ; i++) {
        if (model.allLeafChildren[i].data.colB=== colB) {
          return model.allLeafChildren[i].data.comments;
                                                       }
                                             }
  }

Это то, что я должен был сделать в ответ на свой вопрос. Это комбинация ответов @wctiger и @shuts ниже. Пожалуйста, обратитесь к ним за более подробной информацией

Answer 3

Не уверен, есть ли хороший способ для сетки получить данные в вашем сценарии, так как ваши строки и столбцы после поворота отличаются от исходной модели.

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

tooltip: params => {
  const country = params.node.key;
  const year = params.colDef.pivotKeys[0];
  const athletesWithNumbers = this.state.rowData
    .filter(d => d.year == year)
    .filter(d => d.country === country)
    .filter(d => d.gold > 0)
    .map(d => d.athlete + ': ' + d.gold);
  return athletesWithNumbers.join(', ');
}

См. этот плункер для того, о чем я говорю - опять же, не уверен если это то, что вы хотите, но просто к сведению.