带有反应的ag-grid中的可点击url值答案

【问题标题】：Clickable url value in ag-grid with react带有反应的ag-grid中的可点击url值
【发布时间】：2017-12-26 09:02:01
【问题描述】：

我目前正在尝试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>'，它确实将单元格文本显示为可点击，但 id 未被替换。如果我能以某种方式传入 id，我认为这可以工作？

【问题讨论】：

标签： reactjs ag-grid ag-grid-react

【解决方案1】：

您想为此使用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;
    }
}

【讨论】：

同上，但单元格渲染器也可以使用 cellRendererFramework 成为 React 组件
如果你真的需要，尽量只使用 React 组件版本，它可能比原生 DOM 版本慢。如果有很多列，或者在较慢的计算机上，或者如果您试图保持网格快速滚动，则更重要。
是的，同意 - 只是觉得值得一提
react-router-dom 's <Link>有什么办法吗？
@Sushmit: reacttraining.com/react-router/web/api/Hooks/usehistory 以编程方式使用.push() 导航。

【解决方案2】：

既然你已经用过 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
  }}
/>

现场示例

【讨论】：