如何在 ag 网格透视模式下将不同的列数据显示为工具提示？

Posted 2023-03-28

【中文标题】如何在 ag 网格透视模式下将不同的列数据显示为工具提示？

【英文标题】：How to display different column data as tool tip in ag grid pivot mode?

【发布时间】：2020-09-16 12:34:33

【问题描述】：

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，如果是普通网格，这不是问题。我会很感激关于 group 和 pivot agGrid 的任何想法？

【问题讨论】：

我了解您在这里要做什么，但很好奇非数据透视模式下的数据将如何与数据透视模式下的数据映射，除非您的评论文本对于单个组是相同的

放入agGrid时会自动映射

【参考方案1】：

不确定网格是否有好的方法可以在您的场景中获取数据，因为您的行和列在数据透视后与原始模型不同。

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

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 了解我在说什么 - 再说一次，不确定这是否是您想要的，只是一个 FYI。

【讨论】：

不知何故我的 params.data 未定义

您在 params.node.data 中看到了什么？您的网格是否显示行？

我的 params.node.data 未定义。也许我应该提到我在一个支点和一个 aggfunc 字段上这样做。我会更新问题

重写我的答案 - 希望对您有所帮助。

Thanks.this.state ...state 对我来说是未定义的

【参考方案2】：

只需使用tooltipValueGetter

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

或者只是对 tooltipValueGetter 使用相同的方法

更新：

好的，我明白了

但也很简单

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

例如这里 - 在“运动”列中，我正在显示上一列的工具提示

例如：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

嘿，伙计！我不明白是错的

我刚刚使用了你的代码 sn-p 和我的解决方案

它可以随心所欲地工作

示例：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

【讨论】：

嗨，我使用的是 angularJS 而不是新的 angular，我正在尝试将不同的字段作为工具提示显示到另一个字段，而不是与工具提示相同的字段

您好，我喜欢这个想法，但您是在普通网格中执行此操作的，我的是一个枢轴和组网格，当我使用枢轴时，我无法访问参数中的数据。数据变得不确定。并且无法访问除组和透视列值之外的列值

您好，感谢您再次更新。在您的 Update 2 中枢轴没有发生，您需要将 pivotMode: true 放在网格选项中才能使枢轴工作。如果您实际上更改为 pivot ，则数据将变为未定义的参数

我刚用了你的sn-p

新的解决方案可用

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

【讨论】：

这应该是公认的答案，因为它实际上回答了问题。其他答案都在拐弯抹角

@shuts13 answer 终于解决了我的问题，这就是为什么我做出了接受的答案。是的，我的回答是直接解决问题。

您可以通过投票来承认其他答案的努力，但您的答案应该是被接受的。如果您通过这些多次更新查看他的答案，我真的无法找到正确的答案