如何使用 Ag-grid 属性 tooltipField？

Question

当我使用带有 tooltipField 属性的 ag-grid 时，我被卡住了。我想在每一行的 ag-grid 中实现工具提示。

代码如下。此代码不起作用。

{
  headerName: 'vital',
  field: 'indicator',
  tooltipField: 'indicator',
  cellRenderer: (p: any) => {
    return '<div align="center"><button class="btn btn-sm btn-primary" tooltip="'
      + this.translateService.instant(p.value)
      + '"></button></div>';
  }
}

Answer 1

  // setting up the cell render function for every Column

   $scope.columnsHeaders[i].cellRenderer = function(params) {
         if(params.value != null) {
                return '<span title="'+params.value+'">'+params.value+'</span>';
         }else {return null;}
   }

// this logic will not work for nested JSON soo you can do it like that
// here you are setting toolTipField property of your columns and initialised its value by column data

$scope.columns[i].tooltipField = $scope.columns[i].field;

Answer 2

我知道回答 OP 为时已晚，但我会处理这个问题，也许对任何观看类似内容的人都有用。

在 ag-grid 中，我们为不同的目标提供了许多功能，在实施我们的解决方案之前我们会考虑到这一点。

在 OP 案例中，我可以在 cellRenderer 函数中看到数据操作。这不是这个函数的提议。对于这项工作，您应该使用 valueGetter，在这里您可以施展魔法来获取与此单元格相关的值。

如果这个值需要一些格式，你不应该在 valueGetter 上这样做，因为这个建议你有 valueFormatter 函数。

（图片来自 ag-grid 文档）

当 cellRender 函数被触发时，你已经有了 value 和 valueFormated 所以你应该只关心你想如何在 UI 中显示这个而不是尝试获取/格式化值。

一些通用伪代码：

//Column
{
    headerName: 'Header Name',
    field: 'data.PropValue',
    tooltipField: 'data.PropValue',//This override 'tooltip' function implementation
    valueGetter: function (params) {//Only needed if you need to do some complex to get the value, i.e: data.Name + ' ' + data.Surename
        return params.data.PropValue + ' ' + params.data.PropValue1;
    },
    valueFormatter: function (params) {//Only needed if you need to do some custom parsing before show value in the UI, i.e: '$' + params.value
        return params.value;
    },
    cellRenderer: function (params) {//Only needed if you need some custom html control or something else

        return '<div ><button class="btn btn-sm btn-primary">' + params.valueFormatted +'"</button></div>';
    },
    tooltip: function (params) {//This will show valueFormatted if is present, if no just show the value.
        return (params.valueFormatted ? params.valueFormatted : params.value);
    }
}

关于 OP 问题的伪代码：

//Column
{
    headerName: 'vital',
    field: 'indicator',                        
    valueGetter: (p: any) => {
        return this.translateService.instant(p.value);
    },
    cellRenderer: (p: any) => {
        return '<div align="center"><button class="btn btn-sm btn-primary">' + p.value + '</button></div>';
    },
    tooltip: (p: any) => {
        return p.value;
    }
}

文档链接：

https://www.ag-grid.com/javascript-grid-value-getters/

https://www.ag-grid.com/javascript-grid-column-properties/#columns-only

Answer 3

此代码在 Angular 6 中为我工作。

 this.columnDefs = [
    {
        headerName: "Amount",
        field: "amount",
        valueFormatter: currencyFormatter,
        tooltip: function (params) {
            return (params.valueFormatted);
        },
    }
];

function currencyFormatter(params) {
  return "$ " + (params.value);
}

Answer 4

 this.columnDefs = [
   {
      headerName: 'Amount', field: 'amount',
      cellRenderer: params => {
        return this.currencyFormatter(params);
      },
      tooltipValueGetter: params => {
        return this.currencyFormatter(params);
      },
    }
]

currencyFormatter(params) {
     return "$ " + (params.value);
  }

Answer 5

首先在gridOptions中设置enableBrowserTooltips={true}

const gridOptions = {
  defaultColDef: {
    editable: true,
    sortable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
    resizable: true,
  },
  enableBrowserTooltips: true,
  rowData: {data},
  columnDefs: {columns},
};

然后在您的列定义中添加tooltipField。如果您想在工具提示中显示每个单元格的值，那么您应该将字段传递给工具提示字段。这就是我设置tooltipField = 'name'的原因。这将在工具提示中呈现单元格值。

const columns = [
{
  field: "name",
  headerName: "First Name",
  tooltipField: 'name'
  minWidth: 100,
}]

但就我而言，我想在带有自定义文本的图标上显示工具提示，而且我的列也是自定义的，因此后端没有字段值。所以我使用了tooltipValueGetter。

{
  field: "Action", //this is custom column which renders icon on every row
  cellRendererFramework: (param: IActionColumn) => (
    <Link to={SOME_ROUTE}>
      <FaRegChartBar /> //icon
    </Link>
  ),
  tooltipValueGetter: () => "My Custom Text",
  sortable: false,
  minWidth: 100,
}

希望对您有所帮助！ ;)