我目前正在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>'which 确实将单元格文本显示为可点击但未替换 id 。如果我能以某种方式传入 id，我认为这可以工作？
您想为此使用 a 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;
}
}
既然你已经用过 React，你应该frameworkComponent改用。有人提到了 React 的开销，但因为这是一个非常简单的组件，我认为在这种情况下它并不重要。
无论如何，这是示例设置。
function LinkComponent(props: ICellRendererParams) {
return (
<a href={"https://yourwebsite/entity/detail?id=" + props.value}>
{props.value}
</a>
);
}
...
// in your render method
<AgGridReact
{...}
columnDefs={[...,{
headerName: "Detail",
field: "detail",
cellRenderer: "LinkComponent"
}]}
frameworkComponents={{
LinkComponent
}}
/>
