我目前正在提供
然后我尝试使用模板:'< 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; } }
更多推荐
带有响应的ag
发布评论