如何在ag网格透视模式下显示不同的列数据作为工具提示？ [英] How to display different column data as tool tip in ag grid pivot mode?

问题描述

  var ColDef = [{
 headerName： colA，
字段：'colA'，
 rowGroup：true 
}， 
 {
 headerName： colB，
字段：'colB'，
数据透视：true，
 enablePivot：真实
}，
 {
 headerName： colC，
栏位：'colC'，
 rowGroup：true 
}，
 {
栏位：'colD'，
 aggFunc：'first'，
 valueFormatter：currencyFormatter，
工具提示：function（params）{
 return（params.valueFormatted）; 
}，
}，
 {
栏位：'comment'
}，
 {
栏位：'colF'
 } 
]; 
函数currencyFormatter（params）{
 return params.value; 
} 
  

以上代码来自另一个问题。可以，但是我想使用其他注释字段作为当前 colD的工具提示。这也是一个组和枢轴agGrid，如果它是普通网格这不是问题。我希望对组和透视agGrid有任何想法吗？

解决方案

只需使用 tooltipValueGetter

  {
字段：'message'，
 headerName：'Message'，
 headerTooltip：'Message'，
 width：110，
 filter：'agSetColumnFilter'，
 tooltipValueGetter：（params）=> $ {params.value}一些文本`
} 
  

或仅对tooltipValueGetter使用相同的方法

更新：

好的，我理解

但这也很容易

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

例如此处-在运动列中，我正在显示上一列的工具提示

示例：

OR

您可以通过 tooltipValueGetter
具有下一个构造：

  tooltipValueGetter：function（params）{
 return`Country： $ {params.data.country}，运动员：$ {params.data.athlete}，运动：$ {params.data.sport}`； 
}，
  

示例：

更新2

Hey Man ！我不明白是错的

我刚刚使用了您的代码段和解决方案

它可以根据您的需要

示例：

更新3

一点点操作，我就能得到数据

  {字段： gold，aggFunc： sum，
 tooltipValueGetter：函数（参数）{
 var model = params.api.getDisplayedRowAtIndex（params.rowIndex）; 
 return model.allLeafChildren [0] .data.silver; 
}，
}，
  

最后一个：
https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview

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

above code is from different question. it works but i want to use different 'comment' field as tool tip to current 'colD' . also this is a group and pivot agGrid,if it is normal grid this is not a problem. I would appreciate any ideas for group and pivot agGrid?

解决方案

just use tooltipValueGetter

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

or just use the same method for tooltipValueGetter

UPDATE:

Okay, I understood

but it also easy

Ag-grid has property tooltipField - where you can choose any field from grid

For example here - in the column of 'sport' I am showing tooltip of the previous column

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

OR

You can easily manipulate with data for each field by tooltipValueGetter with next construction:

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

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

Result:

UPDATE 2

Hey Man! I do not understand was is wrong

I just used your code snippet and my solution

And it works as you want

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

UPDATE 3

A little bit of manipulation and I can get the data

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

The Last: https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview

这篇关于如何在ag网格透视模式下显示不同的列数据作为工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！