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

我知道回答OP已经太晚了，但是我处理这个问题并且可能对任何看到类似内容的人都有用。

在ag-grid中，我们有许多不同目标的功能，在实施我们的解决方案之前，请记住这一点。

在OP情况下，我可以看到cellRenderer函数中的数据操作。这不是这个功能的提议。对于这项工作，你应该使用valueGetter，在这里你可以发挥你的魔力来获得与这个细胞相关的价值。

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

（来自ag-grid doc的图片）

当你的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 2

此代码在Angular 6中对我有效。

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

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

Answer 3

a = [1, 3, 5, 7, 9, 10]
b = [2, 4, 6, 8]
a.pop() # get rid of last element
a.extend(b) # extend list a with b data
print(a)

Answer 4

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

如何使用Ag-grid属性tooltipField？

4 个答案: