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

时间:2017-07-20 15:02:53

标签: reactjs ag-grid ag-grid-react

我目前正在尝试ag-grid尝试构建一个表,如果用户点击列值,则会将其带到包含该条目详细信息的页面。

如何在ag-grid中点击单元格值?

我已尝试将valueGetter: this.urlValueGettercolumnDefs

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

但它现在看起来像这样:

enter image description here

然后我尝试使用template: '<a href=\'bill/{id}\'>details</a>',它确实将单元格文本显示为可点击,但不替换ID。如果我能以某种方式传入id,我认为这可行吗?

enter image description here

2 个答案:

答案 0 :(得分:4)

您希望使用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;
    }
}

答案 1 :(得分:1)

由于您已经使用过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
  }}
/>

实时示例

Edit demo app on CodeSandbox