带有响应的ag-grid中的可点击URL值 [英] Clickable url value in ag-grid with react

问题描述

我目前正在提供

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

解决方案

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

https://www.ag-grid.com/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:

https://www.ag-grid.com/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-grid中的可点击URL值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！