如何在 ag grid pivot 模式下将不同的列数据显示为工具提示？

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

以上代码来自不同的问题。它有效，但我想使用不同的 'comment' 字段作为当前 'colD' 的工具提示。这也是一个组和 pivot agGrid，如果它是普通网格，这不是问题。我将不胜感激关于 group 和 pivot agGrid 的任何想法？

Answer 1

不确定网格在你的场景中是否有好的方法来获取数据，因为你的行和列在 pivot 之后与原始模型不同。

也许您可以考虑在网格之外检索此信息。假设您还希望在工具提示中显示一些聚合信息，工具提示功能最终可能如下所示：

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(', ');
}

请参阅 this plunker 了解我正在谈论的内容 - 再次重申，不确定这是否是您想要的，但仅供参考。

Answer 2

只需使用tooltipValueGetter

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

或者对 tooltipValueGetter 使用相同的方法

更新：

好的，我明白了

但也很简单

Ag-grid 有属性 tooltipField - 您可以从网格中选择任何字段

例如这里 - 在 'sport' 的列中，我显示了上一列的工具提示

示例：https://plnkr.co/edit/zNbMPT5HOB9yqI08

或

您可以通过 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 3

    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 的答案的组合。所以也请参考他们以获得更多上下文

如何在 ag grid pivot 模式下将不同的列数据显示为工具提示？

How to display different column data as tool tip in ag grid pivot mode?

javascript

angularjs

ag-grid