带有响应的ag

本文介绍了带有响应的ag-grid中的可点击URL值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我目前正在提供

然后我尝试使用模板：'< a href = b'bill / {id} \'>细节< / a>'确实将单元格文本显示为可点击，但ID不会被替换。我认为如果可以通过某种方式传递ID，这是否可行？

解决方案

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

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

上述文档中的随机示例：

//将值以粗体 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）; }） ; 返回链接； } }

I'm currently giving ag-grid a try and trying to build a table where if the user clicks a column value, they are taken to a page containing that entry's details.

How can I make a cell value clickable in ag-grid?

I've tried using valueGetter: this.urlValueGetter with columnDefs and:

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

but it now looks like this:

I then tried using template: '<a href=\'bill/{id}\'>details</a>' which does show the cell text as clickable but the id is not replaced. I assume this could work if I could somehow pass in the id?

解决方案

You want to use a cellRenderer for that, instead of valueGetter:

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

Random example from above documentation:

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

You can return a string (easier) with your link if you don't want to attach any events.

Otherwise, here's an example of a colDef if you want to attach events to an element:

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