具有反应的ag-grid中的可点击url值

Question

我正在ag-grid尝试构建一个表,如果用户单击列值,它们将被带到包含该条目详细信息的页面.

如何在ag-grid中使单元格值可单击？

我已经尝试使用valueGetter: this.urlValueGetter与columnDefs和:

urlValueGetter(params) {
  return '<a href=\'bill/' + params.data.id + '\'>details</a>';
}

但它现在看起来像这样:

然后我尝试使用template: '<a href=\'bill/{id}\'>details</a>'哪个显示单元格文本可点击但不更换ID.我认为如果我能以某种方式传入id,这可能会有效吗？

Answer 1

您要为此使用cellRenderer，而不是valueGetter：

https://www.ag-grid.com/javascript-grid-cell-rendering-components/#gsc.tab=0

以上文档中的随机示例：

// put the value in bold
colDef.cellRenderer = function(params) {
    return '<b>' + params.value.toUpperCase() + '</b>';
}

如果您不想附加任何事件，则可以在链接中返回一个字符串（更轻松）。

否则，这是colDef如果您要将事件附加到元素的示例：

{
    headerName: 'ID',
    field: 'id',
    cellRenderer: (params) => {
        var link = document.createElement('a');
        link.href = '#';
        link.innerText = params.value;
        link.addEventListener('click', (e) => {
            e.preventDefault();
            console.log(params.data.id);
        });
        return link;
    }
}